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
的功能就是让元素在自己的眼前或近或远
。比方说，我们设置元素
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图形的，如下图示：
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-
3
d
;
四、 transform-box
定义了布局框
/* Keyword values */
transform-box
:
border-box
;
transform-box
:
fill-box
;
transform-box
:
view-box
;
参考
1.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
2 .
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
