[TOC] # 3D坐标系  ## 主要知识点 ●3D位移: translate3d(x,y,z) ●3D旋转: rotate3d(xy,z) ●透视: perspective ●3D呈现transfrom-style # 6.2 3D移动translate3d 3D移动在2D移动的基础上多B加了一个可以移动的方向,就是z轴方向。 ●translform:translateX(100px) :仅仅是在x轴上移动 ●translform:translateY(100px) :仅仅是在Y轴上移动 ●**translform:translateZ(100px) :仅仅是在Z轴上移动(注意: translateZ一般用px单位)** ●transform:translate3d(x,y,z) :其中x、y、z分别指要移动的轴的方向的距离 ## 讲解实验  # 6.3透视perspective（3D必备；越小盒子越大） 在2D平面产生近大远小视觉立体,但是只是效果二维的 ●如果想要在网页产生 3D效果需要透视(理解成3D物体投影在2D平面内)。 ●模拟人类的视觉位置 ,可认为安排- -只眼睛去看 ●透视我们也称为视距 :视距就是人的眼睛到屏幕的距离 ●距离视觉点越近的在电脑平面成像越大 ,越远成像越小 ●透视的单位是像素 ## 透视写在被观察元素的父盒子上面的 d :就是视距,视距就是一个距离人的眼睛到屏幕的距离。 z:就是z轴,物体距离屏幕的距离, z轴越大(正值)我们看到的物体就越大。 ## 3D实验 |  |  | | --- | --- | ## 方便判断旋转（左手原则） | x轴 拇指向右 | y轴拇指向下 | | --- | --- | z轴  # 3D转换**3D呈现**transfrom-style●控制子元素是否开启三维立体环境。 ●transform-style: flat**子元素不开启3d立体空间默认**的 ●transform- style: preserve- 3d;**子元素开启立体空间**（保持子元素3D效果） ●代码**写给父级**,但是影响的是子盒子 ●这个属性很重要,**后面必用**  | 1、 | 2、 | | --- | --- | | 3、 |