3D转换（1）

 

文章目录

一、3D转换是什么？

二、3D转换

1.3D转换的知识要点

2. 3D移动translate3d

3.语法 

4.代码演示

三、透视

1.知识点讲解

2.代码演示

四.translateZ

 

---

 

---

 

一、3D转换是什么？

1.3D转换的特点：1).近大远小。2).物体和缅遮挡不可见。

2.三维坐标系

x 轴：水平向右-- 注意：x 轴右边是正值，左边是负值

y 轴：垂直向下-- 注意：y 轴下面是正值，上面是负值

z 轴：垂直屏幕-- 注意：往外边的是正值，往里面的是负值

 

二、3D转换

1.3D转换的知识要点

     3D位移：translate3d(x, y, z)

     3D旋转：rotate3d(x, y, z)

     透视：perspctive3D呈现transfrom-style

2. 3D移动translate3d

3D移动就是在2D移动的基础上多加了一个可以移动的方向，就是 z 轴方向

transform: translateX(100px)：仅仅是在 x 轴上移动

transform: translateY(100px)：仅仅是在 y 轴上移动

transform: translateZ(100px)：仅仅是在 z 轴上移动

transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离 

注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

3.语法 

 

transform: translate3d(x, y, z)

4.代码演示

transform: translate3d(100px, 100px, 100px)

/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */

transform: translate3d(100px, 100px, 0)

三、透视

1.知识点讲解

1. 如果想要网页产生3D效果需要透视(理解成3D物体投影的2D平面上)。
2. 实际上模仿人类的视觉位置，可视为安排一直眼睛去看。
3. 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
4. 距离视觉点越近的在电脑平面成像越大，越远成像越小。
5. 透视的单位是像素。

2.代码演示

body {

perspective: 1000px;

}

四.translateZ

1. translateZ与perspecitve的区别perspecitve给父级进行设置，translateZ给子元素进行设置不同的大小。