文章目录

• 1. 三维坐标系
• 2. 3D位移translate3d
• 3. 透视perspective
• 4. 3D旋转rotate3d
• 5. 3D呈现transform-style

1. 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

• x轴： 水平向右 注意： x 右边是正值，左边是负值
• y轴： 垂直向下 注意： y 下面是正值，上面是负值
• z轴： 垂直屏幕 注意： 往外面是正值，往里面是负值

tips： 3D 转换我们主要学习工作中最常用的3D位移和3D旋转

2. 3D位移translate3d

1. translform:translateX(50px)：在x轴移动
2. translform:translateY(50px)：在Y轴移动
3. translform:translateZ(50px)：在Z轴移动
4. transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

tips： 因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

3. 透视perspective

透视： 在2D平面产生近大远小视觉立体，但是只是效果二维的

• 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 通俗讲，就是 “近大远小”

• d：就是视距，视距就是一个距离人的眼睛到屏幕的距离
• z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大

4. 3D旋转rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转

• transform: rotateX(60deg) ：沿X轴的正方向旋转60度
• transform: rotateY(60deg) ：沿Y轴的正方向旋转60度
• transform: rotateZ(60deg) ：沿Z轴的正方向旋转60度
• transform: rotate3d(x,y,z,deg) ：沿自定义轴旋转自定义大小的角度

<style>    transform: rotate3d(1, 0, 0, 45deg);    /* 表示沿X轴旋转45度 */    transform: rotate3d(1, 1, 0, 45deg);    /* 表示沿X轴与Y轴夹角的一半的方向旋转45度 */</style>

tips： xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度

5. 3D呈现transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 子元素不开启3d立体空间（默认）
• transform-style: preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子

通过这篇文章，我们可以系统地了解CSS中的3D转换技术，包括三维坐标系、3D位移、透视、3D旋转和3D呈现。这些技术可以让网页设计更加生动和立体，为设计师提供了丰富的创作手段。希望你能通过这些知识，创造出更具吸引力的网页视觉效果。

如果你对某个部分感兴趣，不妨尝试自己动手实践一下，比如尝试用translate3d实现一个立体效果的按钮，或者用rotate3d制作一个旋转的立方体。通过实践，你会更深刻地理解这些概念和技术的应用。

最后，想了解更多关于网页设计和前端开发的技巧吗？欢迎留言讨论，或者关注我们的博客，获取更多实用教程和案例分享。

文章目录

• 1. 三维坐标系
• 2. 3D位移translate3d
• 3. 透视perspective
• • • • 3.1translateZ
• 4. 3D旋转rotate3d
• 5. 3D呈现transform-style

1. 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

• x轴： 水平向右 注意： x 右边是正值，左边是负值
• y轴： 垂直向下 注意： y 下面是正值，上面是负值
• z轴： 垂直屏幕 注意： 往外面是正值，往里面是负值

tips： 3D 转换我们主要学习工作中最常用的3D位移和3D旋转

2. 3D位移translate3d

1. translform:translateX(50px)：在x轴移动
2. translform:translateY(50px)：在Y轴移动
3. translform:translateZ(50px)：在Z轴移动
4. transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

tips： 因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

3. 透视perspective

透视： 在2D平面产生近大远小视觉立体，但是只是效果二维的

• 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 通俗讲，就是 “近大远小”

• d：就是视距，视距就是一个距离人的眼睛到屏幕的距离
• z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大

3.1translateZ

• translform:translateZ(50px)：在Z轴移动
• 有了透视，就能看到translateZ 引起的变化了

4. 3D旋转rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转

• transform: rotateX(60deg) ：沿X轴的正方向旋转60度
• transform: rotateY(60deg) ：沿Y轴的正方向旋转60度
• transform: rotateZ(60deg) ：沿Z轴的正方向旋转60度
• transform: rotate3d(x,y,z,deg) ：沿自定义轴旋转自定义大小的角度

<style>    transform: rotate3d(1, 0, 0, 45deg);    /* 表示沿X轴旋转45度 */    transform: rotate3d(1, 1, 0, 45deg);    /* 表示沿X轴与Y轴夹角的一半的方向旋转45度 */</style>

tips： xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度

5. 3D呈现transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 子元素不开启3d立体空间（默认）
• transform-style: preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子