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

时间:2021-08-10 10:17:11
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透视点的元素中)
           CSS3的transform以及3D相关属性总结
2)perspective
用户到 z=0 位置的距离
3D元素的一部分在 用户的后面,z坐标值 大于  perspective属性值,那么这部分不会被绘制
我们都知道近大远小的道理,对于没有 rotateX 以及 rotateY 的元素, translateZ 的功能就是让元素在自己的眼前或近或远 。比方说,我们设置元素 perspective 201 像素,如下:
      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图形的,如下图示:
       CSS3的transform以及3D相关属性总结

         CSS3的transform以及3D相关属性总结
4)rotate
旋转,写法如下:
      CSS3的transform以及3D相关属性总结
5)scale
放大、缩小,写法如下:
       CSS3的transform以及3D相关属性总结
6)translate
定义平移距离
       CSS3的transform以及3D相关属性总结
7)总结写法如下
       CSS3的transform以及3D相关属性总结
二、 transform-origin
The  transform-origin  css property sets the origin for an element's transformations 设置变换的起点
       CSS3的transform以及3D相关属性总结
三、 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- 3 d ;

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

参考