1.3 3D转换

3D旋转 rotate3d

对于元素旋转的方向的判断

我们需要先学习一个左手准则。

1.左手准则

左手的手拇指指向 x轴的正方向

其余手指的弯曲方向就是该元素沿着x轴旋转的方向

2.左手准则

左手的手拇指指向 y轴的正方向    

其余手指的弯曲方向就是该元素

沿着y轴旋转的方向（正值）

3.   3D旋转 rotate3d

transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

xyz 是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg

transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

4. 3D呈现 transfrom-style

控制子元素是否开启三维立体环境。。

transform-style: flat 子元素不开启3d立体空间 默认的

transform-style: preserve-3d; 子元素开启立体空间

* 代码写给父级，但是影响的是子盒子

这个属性很重要，后面必用

3D呈现案列：