image.png

有什么特点

  • 近大远小。
  • 物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

三维坐标系

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

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

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

  • 3D位移: translate3d(x,y,z)
  • 3D旋转:rotate3d(x,y,z)
  • 透视: perspective
  • 3D呈现 transfrom-style

透视 perspective

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

  • 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
  • 模拟人类的视觉位置，可认为安排一只眼睛去看
  • 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大，越远成像越小
  • 透视的单位是像素

透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。

translateZ

translform:translateZ(100px)：仅仅是在Z轴上移动。
有了透视，就能看到translateZ 引起的变化了

  • translateZ：近大远小
  • translateZ：往外是正值
  • translateZ：往里是负值

3D旋转 rotate3d

语法

  • transform:rotateX(45deg)：沿着x轴正方向旋转 45度
  • transform:rotateY(45deg)：沿着y轴正方向旋转 45deg
  • transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
  • transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

对于元素旋转的方向的判断 我们需要先学习一个左手准则。

3D-X轴左手准则

image.png

  • 左手的手拇指指向 x轴的正方向
  • 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

3D-Y轴左手准则

image.png
左手的手拇指指向 y轴的正方向
其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）

transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转 45deg
transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

3D呈现 transfrom-style

image.png

  • 控制子元素是否开启三位立体环境
  • transfrom-style: flat子元素不开启3D立体空间 默认
  • transfrom-style: preserve-3d; 子元素开启立体空间
  • 代码写给父级