三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的
- x轴:水平向右 注意:x右边是正值,左边是负值
- y轴:垂直向下 注意:y下边是正值,上边是负值
- z轴:垂直屏幕 注意:z往外面是正值,往里面是负值(近正远负)
3D位移:translate3d(x, y, z)
- translform: translateX(100px),仅在X轴移动
- translform: translateY(100px),仅在Y轴移动
- translform: translateZ(100px),仅在Z轴移动
- translform: translate3d(x, y, z),其x,y,z分别指要移动的轴的方向距离
3D旋转:rotate3d(x, y, z)
- translform: rotateX(45deg),沿着X轴正方向旋转45度
- translform: rotateY(45deg),沿着Y轴正方向旋转45deg
- translform: rotateZ(45deg),沿着Z轴正方向旋转45deg
- translform: rotate3d(x, y, deg),沿着自定义轴旋转deg为角度
左手准则之x轴,手指弯曲平放
左手的大拇指指向x轴正方向,其余手指的弯曲方向就是该元素沿着x轴旋转的正方向
左手准则之y轴,手指弯曲垂直放
左手的大拇指指向y轴正方向,其余手指的弯曲方向就是该元素沿着y轴旋转的正方向
透视:perspective
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远越小
- 透视的单位是像素
- 透视写在被观察元素的父盒子上面
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离
z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大
3D呈现:transform-style
- 控制子元素是否开启三维立体环境
- transform-style: flat; 子元素不开启3D立体空间(默认的)
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级,但是影响的是子盒子