perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。

注意：

1：perspective 如果设置在transform元素的父元素上，对所有子元素都生效

2：perspective 越小，理解为观察者离3D物体(屏幕平面)越近。(看第2个方块，想象1个门板放下来，离近看就像一条路)

3：看到box3,box4,同样的rotateY,以及parent的perspective,但是box展现旋转量不同，这是因为perspective-origin不同

这里的perspective 都是直接设置到旋转元素本身，而不是父元素。

小结：

perspective 对元素自身无效果

perspective 设置给元素本身，对元素并不起作用，但是元素的子元素会得到透视效果(远近观察效果)

本例中，元素保持不动，观察不同的 perspective属性，体会一下

可以看出：

perspective 相当于在与屏幕垂直的z轴上，移动观察者(摄像机)远近

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴

该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素

x-axis:默认值：50%,可能的值：left,center,right,length,%
y-axis:默认值：50%,可能的值：top,center,bottom,length,%

本例中，元素保持不动，观察不同的 perspective-origin 属性，体会一下

可以看出：

perspective-origin 相当于在屏幕上，移动观察者(摄像机)位置

0,0对应左上角，100% 100%对应右下角

定义沿 X 轴的 3D 旋转。

小结：

rotateX 对物体沿水平(X)轴进行旋转

X轴的位置就在元素的水平横切中央部分

定义沿 Y 轴的 3D 旋转。

小结：

rotateY 对物体沿垂直(Y)轴进行旋转

Y轴的位置就在元素的垂直纵切中央部分

定义沿 Z 轴的 3D 旋转。

小结：

rotateZ 对物体沿垂直与屏幕的(Z)轴进行旋转

z轴的位置就在元素的中央点

定义点(x,y,z) 和 (0,0,0) 连线为轴、angle为角度的 3D 旋转。

注意：

(1,0,0) 其实就是 rotateX

(0,1,0) 其实就是 rotateY

(0,0,1) 其实就是 rotateZ

(1,1,0) 相当于z=0平面上,介于x,y之间的斜线

定义沿 z 轴的 scale。

注意：

scale在2维平面上，通过scale(x,y)或者scaleX,scaleY来定义缩放

只有scaleZ属于3维上的

观察：

scaleZ的变化很小(block3)，这里我们让block旋转30度，以便产生z轴上的内容，让scaleZ可以观察到

scale3d:其实就是同时进行x,y,z上的缩放

定义沿 z 轴的 translate(位移)。

注意：

因为是设置物体在z轴的位置，而perspective恰好表示观察者距离屏幕的距离：

本例中，perspective 从500渐变到200(从z轴远处靠近屏幕)：

1.当translateZ < perspective 时，物体可见，且此2值越接近，物体看上去越大

2.当translateZ > perspective 时，物体(box3,box4)不可见(因为跑到后面去了)

定义沿 x,y,z 3轴的 translate(位移)。

说明：

这个不仅仅是一个语法糖，当translate,rotate混合使用的时候，声明translateX,translateY的顺序会影响最后的结果

这种情况下，使用translate3d，一次性指定物体在所有方向上的位移，更不容易出错

定义子元素是否保留自己的3D空间。
flat: 子元素将不保留其 3D 位置。
preserve-3d: 子元素将保留其 3D 位置。

说明：

1：box1 外面元素在3D变换，设置preserve-3d,他的子元素也有自己的3D空间，可以看到旋转过程中尖角出现

2：box2 外面元素在3D变换，设置flat,他的子元素没有自己的3D空间，可以看到旋转过程中，始终投影到父亲的x,y平面

定义子元素的背面是否可见。

说明：

1：box1 转到背面的时候就看不见了，因为设置了Backface Visibility =hidden

2：box2 转到背面仍然可见，因为设置了Backface Visibility =visible

3：cube1 设置背面不可见，可以看到转动过程中只能看到当前面

4：cube2 设置背面可见，可以看到转动过程中所有面都是可见的