基本原理

设置3D空间场景

激活透视效果： perspective

激活 3D 空间： transform-style:preserve-3d

设置Z轴的位移距离

设置 translateZ 的位移距离

营造近大远小，近快远慢的效果，如果有需要可以再增加位置、角度等参数。

基本元素

perspective

观察元素的距离，用于激活透视效果。

perspective:50px; 值越小，透视距离越近，效果越明显。

perspective 属性给父元素设置。

transform-style:preserve-3d

指定元素嵌套在三维空间中呈现。

transform-style:flat | preserve-3d

此元素给子元素设置，对子元素的子元素无效。

translateZ

表示元素在Z轴方向的位移

translateZ（-20px） 值越小，子元素显示的越小，运动的越慢。

注意： perspective 的值需要大于 translateZ