<!-- 在本身元素上设置透视无效果 -->
<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>

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: flat | preserve-3d