深入理解 CSS变形 transform(3d)
坐标轴
在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外
<!-- 在本身元素上设置透视无效果 -->
<div style="float:left;margin-right: 10px;border:2px solid gray;">
<div style="perspective: 200px;width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div>
</div>
<!-- 在父级元素上设置透视有效果 -->
<div style="perspective: 200px; float:left;margin-right: 10px;border:2px solid gray;">
<div style="width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div>
</div>
perspective-origin
值: x轴 y轴
初始值: 50% 50%
应用于: 非inline元素(包括block、inline-block、table、table-cell等)
x轴
left: 0% center: 50% right: 100%
y轴
top: 0% center: 50% bottom: 100%
矩阵matrix3d
3d变形函数位移、旋转和缩放都是通过矩阵设置不同的参数而实现的。相比于2d矩阵martrix()的6个参数而言，3d矩阵matrix3d却有12个参数。其变形规则与2dmatrix()类似，只不过是从3*3矩阵，变成了4*4矩阵
matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)
3d位移
3d位移函数主要包括traslateZ()和translate3d()
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
3d缩放
3d缩放函数主要包括scaleZ()和scale3d()
scale3d(x,y,z)
默认值为scale3d(1,1,1)，当参数为负值时，先翻转再缩放
scaleZ(z)相当于scale3d(1,1,z)
[注意]3d位移函数相当于matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)
[注意]scaleZ()和scale3d()单独使用时没有任何效果
.box1 .in{
transform: translateZ(-500px);
}
.box2 .in{
transform: translateZ(-100px);
}
.box3 .in{
transform: scaleZ(5) translateZ(-100px);
}
//下图中从左到右分别是box1,box2,box3。由此得知，box3也相当于向z轴移动了-500px
所以transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等价的
3d旋转
3d旋转函数主要包括rotateX()、rotateY()、rotateZ()、rotate3d()
rotate3d(x,y,z,Ndeg)
x、y、z分别用来描述围绕x、y、z轴旋转的矢量值。最终变形元素沿着由(0,0,0)和(x,y,z)这两个点构成的直线为轴，进行旋转。当N为正数时，元素进行顺时针旋转；当N为负数时，元素进行逆时针旋转
[注意]safari浏览器不支持keyframes中改变rotate3d()
rotateX(Ndeg)相当于rotate3d(1,0,0,Ndeg)
rotateY(Ndeg)相当于rotate3d(0,1,0,Ndeg)
rotateZ(Ndeg)相当于rotate3d(0,0,1,Ndeg)
背景可见
元素的背面默认是可见的。但有时需要让元素背面不可见，这就要用到属性backface-visibility
backface-visibility: 设置元素背面是否可见
visible:可见，默认 hidden:不可见
变形风格
变形风格transform-style允许变形元素及其子元素在3d空间中呈现。变形风格有两个值。flat是默认值，表示2d平面；而perserve-3d表示3d空间
[注意]当设置了overflow:非visible或clip:非auto时，transform-style:preserve-3d失效
transform-style: flat | preserve-3d