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只能设置长度值traslateZ(z)相当于translate3d(0,0,z)
[注意]常用-webkit-transform: translateZ(0);来开启硬件加速[注意]3d位移函数相当于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)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()单独使用时没有任何效果CSS Code复制内容到剪贴板
.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为负数时，元素进行逆时针旋转
rotateX(Ndeg)相当于rotate3d(1,0,0,Ndeg)
rotateY(Ndeg)相当于rotate3d(0,1,0,Ndeg)
rotateZ(Ndeg)相当于rotate3d(0,0,1,Ndeg)
透视函数
上面详细介绍了透视属性perspective，但透视属性应用在变形元素的父级或祖先级。而透视函数perspective()是transform变形函数的一个属性值，应用于变形元素本身
[注意]由于透视原点perspective-origin只能设置于设置了perspective透视属性的元素。若为元素设置透视函数perspective()，则透视原点不起使用，观察者使用默认位置，即元素中心点对应的平面上perspective(<length>)
透视函数perspective(<length>)的参数只能是长度值，长度值只能是正数
