定义:3D旋转是让元素在三位平面内沿x轴、y轴、z轴进行旋转,沿着自己设计的位置点旋转。
g :就是视距,视距就是一个距离人的眼睛到屏幕的距离。 2:就是z轴,物体距离屏幕的距离, z轴越大(正值)我们看到的物体就越大。
3D旋转rotate语法
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坐标的箭头向外{图片(中指)指向电脑屏幕}代表的值是负数,反之值为正,其他坐标也是如此。
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);
控制子元素是否开启三维立体环境。
transform-style: flat子元素不开启3d立体空间默认的
transform-style: preserve-3d;子元素开启立体空间
代码写给父级,但是影响的是子盒子
展示图: