CSS3的transform以及3D相关属性总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_36091081/article/details/80015478
CSS3的3D相关属性总结
概述
项目中遇到微交互、增加页面用户体验的需求,运用CSS3的transform变化的3D属性就可以达到效果。
transform概述
W3C 的解释:CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
即:css transform定义元素在二维、三维上空间上的变换;transform通过修改坐标空间、改变元素的形状、位置,并不会打乱正常文档流。
transform如何使用,有哪些属性呢?
一、 transform
1)backface-visibility
  元素的后端是否可见  该属性只用在 3D 变换中(即设置了Pespective透视点的元素中)
          
2)perspective
用户到 z=0 位置的距离
3D元素的一部分在 用户的后面,z坐标值 大于  perspective属性值,那么这部分不会被绘制
我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素perspective201像素,如下:
      perspective: 201px;
则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近201像素,但是不超过201像素的时候(如200像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面,所谓一叶蔽目,不见泰山,就是这么回事。当translateZ值再变大,超过201像素的时候,该元素看不见了——这很好理解:我们是看不见眼睛后面的东西的!translateZ, 当translateZ为正值的时候,元素会向其面对的方向走去;如果元素无旋转,就会朝显示器走来。(该段摘自http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
3)perspective-origin
The perspective-origin css property determines the position at which the viewer is looking
The perspective-origin property determines the origin for the perspective property by altering its vanishing  
我的理解是:通过改变消失点的位置,即视点的位置,3D图形就是从该视点出发观察整个3D图形的,如下图示:
      

        
4)rotate
旋转,写法如下:
     
5)scale
放大、缩小,写法如下:
      
6)translate
定义平移距离
      
7)总结写法如下
      
二、 transform-origin
The transform-origin css property sets the origin for an element's transformations 设置变换的起点
      
三、 transform-style
The transform-style css property determines if the children of an element are positioned in the 3D-space or are flattened in the plane of the element.
定义一个元素的子元素是否定位在3D元素中后者2D平面中
/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

四、 transform-box
定义了布局框
/* Keyword values */
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;

参考
展开阅读全文

没有更多推荐了,返回首页