空间(3D)转换
- 平移
- 旋转
- 缩放
- 透视(视距)
- 3D呈现
*空间转换是在平面转换的基础上增加了一个Z轴的变换,空间转换可以让我们的页面实现立体变换效果,注:现在网页上空间转换效果不常见,所以我们稍作了解即可
平移
增加Z轴:transform:translateZ()
- z轴是指垂直屏幕向外的轴
- 可以实现z轴方向的位置偏移
- 连写:transform:translate3d(x,y,z)
旋转
增加Z轴:transform:rotateZ()
transform:rotate3d(x,y,z,deg)
x,y,z的作用是描述一个方向的向量坐标点,向量坐标与原点的连线为旋转轴,deg为旋转角度
缩放
语法:
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z)
3D呈现
- 透视
- 3