css-3D 学习笔记

定义：3D旋转是让元素在三位平面内沿x轴、y轴、z轴进行旋转，沿着自己设计的位置点旋转。

【透视(视距) perspective】

• 透视的单位是像素
• 透视写到被观察元素的父盒子上面
• perspective值越小，物体看起来越大
• perspective和3D搭配使用，加在父盒子上解锁3D特效

g :就是视距,视距就是一个距离人的眼睛到屏幕的距离。 2:就是z轴,物体距离屏幕的距离, z轴越大(正值)我们看到的物体就越大。

3D旋转rotate语法

【位移（移动）translate3d(x,y,z)】

transform:rotateX(90deg)  : 沿着x轴正方向旋转90度

transform:rotateY(90deg)  : 沿着y轴正方向旋转90度

transform:rotateZ(90deg)  : 沿着z轴正方向旋转90度

transform:rotate3d(x,y,z,90deg)  : 沿着变量x、y、z轴正方向旋转90度，看到这里又想起了，高中数学老师教的右手系的手势图了，

当然Z坐标的箭头向外{图片(中指)指向电脑屏幕}代表的值是负数，反之值为正，其他坐标也是如此。

rotate3d(x,y,z,deg)

x轴旋转方向：正值往后倒，负值往前摔

transform: rotateX(-45deg)；沿着x轴逆方向旋转45度，等价于transform: rotate3d(1, 0, 0, 45deg);

y轴旋转方向：正值往右转，负值往左转

 transform: rotateY(45deg)；沿着y轴正方向旋转45度，等价于transform: rotate3d(0, 1, 0, 45deg);

z轴旋转方向：正值往下转(相当于2D顺时针)，负值往上转(逆时针)

 transform: rotateZ(45deg)；沿着z轴正方向旋转45度，等价于transform: rotate3d(0, 0, 1, 45deg);

【3D呈现transform-style】

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

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

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

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

展示图：