CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）

admin管理员组

文章数量:1130349

3D移动translate3d

• transform: translateX(100px)：仅仅是在X轴上移动
• transform: translateY(100px)：仅仅是在Y轴上移动
• transform: translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般都是用px单位）
• transform: translateX(100px) translateY(100px)：沿着X轴和Y轴同时移动
• transform: translate3d(x,y,z)：在x，y，z轴上都移动

透视perspective

透视perspective的语法格式如下：
方法1:perspective: 800px;
方法2:transform: prespective(800px);

注意：
1、方法1定义的perspective只在初次渲染时，投影在屏幕上；
2、方法2定义的perspective会根据transform动画的变化来进行重新的渲染；
3、当使用js或Css3进行动画时，尽量选择方法2

• 如果想要在网页上产生3D效果，就需要使用透视
• 透视的单位是像素
• 透视也称为视距，表示人的眼睛到屏幕的距离。对同一个位置的物体，视距越大，成像越小
• 透视要写在被观察元素的父盒子上面（可以是祖先元素）
• 下图就是一个透视的说明图，其中

1. d：就是视距，即人的眼睛到屏幕的距离
2. z：就是z轴，即物体到屏幕的距离，z轴越大（正值），成像也就越大；负值则相反

3D旋转rotate3d

• transform: rotateX(45deg)：沿着x轴正方向旋转45度

  其中，旋转角度为正时，图片上边框向里旋转；旋转角度为负时，图片上边框向外旋转。（可以借助左手准则来记忆，手指的弯曲方向就是旋转角度为正时的旋转方向）

• transform: rotateY(45deg)：沿着y轴正方向旋转45deg

  其中，旋转角度为正时，图片上边框向里旋转；旋转角度为负时，图片上边框向外旋转。（可以借助左手准则来记忆，手指的弯曲方向就是旋转角度为正时的旋转方向）

• transform: rotateZ(45deg)：沿着z轴正方向旋转45deg，跟2D旋转几乎一样，都是在平面内旋转

• transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转deg

  其中，xyz表示旋转轴的矢量；deg表示旋转的角度。举例说明如下：

transform: rotate3d(1,0,0,45deg)		——表示沿着x轴旋转45度
transform: rotate3d(1,1,0,45deg)		——表示沿着对角线旋转45度

3D呈现transform-style

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

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！

3D移动translate3d

• transform: translateX(100px)：仅仅是在X轴上移动
• transform: translateY(100px)：仅仅是在Y轴上移动
• transform: translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般都是用px单位）
• transform: translateX(100px) translateY(100px)：沿着X轴和Y轴同时移动
• transform: translate3d(x,y,z)：在x，y，z轴上都移动

透视perspective

透视perspective的语法格式如下：
方法1:perspective: 800px;
方法2:transform: prespective(800px);

注意：
1、方法1定义的perspective只在初次渲染时，投影在屏幕上；
2、方法2定义的perspective会根据transform动画的变化来进行重新的渲染；
3、当使用js或Css3进行动画时，尽量选择方法2

• 如果想要在网页上产生3D效果，就需要使用透视
• 透视的单位是像素
• 透视也称为视距，表示人的眼睛到屏幕的距离。对同一个位置的物体，视距越大，成像越小
• 透视要写在被观察元素的父盒子上面（可以是祖先元素）
• 下图就是一个透视的说明图，其中

1. d：就是视距，即人的眼睛到屏幕的距离
2. z：就是z轴，即物体到屏幕的距离，z轴越大（正值），成像也就越大；负值则相反

3D旋转rotate3d

• transform: rotateX(45deg)：沿着x轴正方向旋转45度

  其中，旋转角度为正时，图片上边框向里旋转；旋转角度为负时，图片上边框向外旋转。（可以借助左手准则来记忆，手指的弯曲方向就是旋转角度为正时的旋转方向）

• transform: rotateY(45deg)：沿着y轴正方向旋转45deg

  其中，旋转角度为正时，图片上边框向里旋转；旋转角度为负时，图片上边框向外旋转。（可以借助左手准则来记忆，手指的弯曲方向就是旋转角度为正时的旋转方向）

• transform: rotateZ(45deg)：沿着z轴正方向旋转45deg，跟2D旋转几乎一样，都是在平面内旋转

• transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转deg

  其中，xyz表示旋转轴的矢量；deg表示旋转的角度。举例说明如下：

transform: rotate3d(1,0,0,45deg)		——表示沿着x轴旋转45度
transform: rotate3d(1,1,0,45deg)		——表示沿着对角线旋转45度

3D呈现transform-style

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

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！

本文标签： 透视translate3dperspectivestyletransform