这篇博客介绍了前端CSS的3D空间转换，包括平移、旋转、缩放和3D呈现。平移通过translateZ()实现Z轴偏移，旋转使用rotateZ()和rotate3d()指定轴和角度，缩放利用scale()或scale3d()调整元素大小。3D呈现的关键是透视和transform-style: preserve-3d，前者模拟视距，后者确保子元素的3D效果得以保留。
空间(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
最低0.47元/天 解锁文章
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
