本文介绍了CSS中3D旋转的rotate3d函数，使用左手准则确定元素在x、y和z轴上的旋转方向。同时讲解了transfrom-style属性如何控制子元素的3D呈现效果，包括flat和preserve-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呈现案列：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
