HTML5基础加强css样式篇(css属性transform 函数(3D)transform-style)(二十五)
来源:互联网 发布:防螨虫床上用品 知乎 编辑:程序博客网 时间:2024/05/29 03:11
上一篇说的是2D这一篇说3D(3D空间思维不好的请自行绕过)
1.打开3D空间:
transform-style:
①可选值:flat(2D默认值) ,preserve-3d (3D)
2.函数方法同2D的函数方法,多个参数例子为:scale(x,y)=>scale(x,y,z), scaleX(x)=>scaleZ(z);
3.z轴贯穿屏幕,屏幕外为正值;
4.景深和景深中心点:
(1)perspective: number | none;
①默认值: 0
②元素距离视图的距离,以像素计。
(2)perspective-origin: x-axis y-axis
①默认值:50% 50%
②注意:景深中心点必须与 perspective 属性一同使用。
5.变换中心点:
(1)transform-origin: x-axis y-axis z-axis;
①3D变换的中心点
②默认值:50% 50% 0
注意:z-axis 一定不要使用%!!! 屏幕内负值,反之为正值。
6.背景显示:
(1)backface-visibility: visible|hidden;
①visible 背面是可见的。
②hidden 背面是不可见的。
注:当一个元素设置了 rotateY(180deg),相当与对元素进行“翻面”,此时如果设置了backface-visibility: visible此时该元素不可见。
0 0
- HTML5基础加强css样式篇(css属性transform 函数(3D)transform-style)(二十五)
- HTML5基础加强css样式篇(css属性transform 函数(3D)3D盒子)(二十七)
- HTML5基础加强css样式篇(css属性transform 函数(2D)时钟)(二十六)
- HTML5基础加强css样式篇(css属性transform 函数(2D)的scale(),transform-origin,skew(),translate(),rotate() )(二十四)
- HTML5基础加强css样式篇(css过渡属性简写,cubic-bezier过度曲线函数使用)(二十)
- HTML5基础加强css样式篇(text-align,text-decoration,text-indent,text-transform,letter-spacing,word-spacin)(四)
- HTML5基础加强css样式篇(css过渡属性的隐式过渡问题)(二十二)
- HTML5基础加强css样式篇(常用伪元素选择器after,before)(十五)
- HTML5基础加强css样式篇(css属性border详解(一))(三十三)
- HTML5基础加强css样式篇(css属性border圆角:border-radius)(三十五)
- HTML5基础加强css样式篇(css属性:怪异盒模型解析)(四十六)
- HTML5基础加强css样式篇(文字阴影css属性:text-shadow)(四十四)
- HTML5基础加强css样式篇(css过度覆盖问题)(二十一)
- HTML5基础加强css样式篇(css过渡结束事件:transitionend)(二十三)
- HTML5基础加强css样式篇(css计算函数:calc())(四十七)
- HTML5基础加强css样式篇(font-family,font-size, font-style,font-variant, font-weight , font 简写属性 )(五)
- HTML5基础加强css样式篇(属性选择器)(十四)
- HTML5基础加强css样式篇(盒子阴影属性:box-shadow)(三十六)
- php curl获取微信公众号access_token
- GCD-dispatch_semaphore
- tomcat找不到第三jar包
- fragment:传递参数
- Android之SwipeRefreshLayout使用和冲突解决
- HTML5基础加强css样式篇(css属性transform 函数(3D)transform-style)(二十五)
- JS 根据当前日期计算本周一与本周末日期
- WebDriver中的元素状态检测表
- 案例分享|数据可视化下的驱动业务增长
- GCD-dispatch_barrier_async
- javascript事件大全
- oracle调优 oracle培训
- AndroidStuido连接VPN Shdowsocks
- tomcat 配置虚拟路径