3D变换

之前我们学过2D变换，今天一起来学习一下3D变换，想到3D，我么会想到一个立体的空间。
那么第一步，我们需要搭建一个3D的空间

<div class="wrap">
<div class="box">
<div class="redDiv">1</div>
<div class="blueDiv">2</div>
</div>
</div>

最外面的.wrap我们看做景深层，并给景深层设置景深,景深的意思就是我们眼睛离屏幕的距离perspective:1600px;
中间的.box我们将设置3D的变换区transform-style: preserve-3d;
最里面的div我们将参照.box来进行3D变换，比如绕X轴/Y轴/Z轴旋转一定角度，相对于X轴/Y轴/Z轴进行位置变换，以及缩放比例,因此我们知道transform属性可以设置3个属性值，分别为translate rotate scale