1.认识3D转换
三维坐标系
-
x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值
-
y 轴:垂直向下 -- 注意:y 轴下面是正值,上面是负值
-
z 轴:垂直屏幕 -- 注意:往外边的是正值,往里面的是负值
2.3D转换基本语法
-
3D
位移:translate3d(x, y, z)
-
3D
旋转:rotate3d(x, y, z)
-
透视:
perspctive
-
3D
呈现transfrom-style
3.3D移动translate3d
基本语法: transform: translate3d(x, y, z)
-
注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充
4.透视 perspective
透视也称为视距,所谓的视距就是人的眼睛到屏幕的距离,距离视觉点越近的在电脑平面成像越大,越远成像越小透视的单位是像素。
例如:perspective: 1000px;
5.translateZ
translateZ
与 perspecitve
的区别 :perspecitve
给父级进行设置,translateZ
给 子元素进行设置不同的大小。
6.3D旋转 rotate
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
1)语法
-
transform: rotateX(45deg)
-- 沿着 x 轴正方向旋转 45 度 -
transform: rotateY(45deg)
-- 沿着 y 轴正方向旋转 45 度 -
transform: rotateZ(45deg)
-- 沿着 z 轴正方向旋转 45 度 -
transform: rotate3d(x, y, z, 45deg)
-- 沿着自定义轴旋转 45 deg 为角度
例如围绕Z轴进行旋转45度
transform: rotate3d(0, 0, 1, 45deg)
7.3D呈现 transform-style
用于控制子元素是否开启三维立体环境,代码写给父级元素,但影响的是盒子
基本语法:
-
transform-style: flat
代表子元素不开启3D
立体空间,默认的 -
transform-style: preserve-3d
子元素开启立体空间