保安日记：前端学习第十篇之3D转换

前端学习第十篇

3D转换

三维坐标系： 即立体空间由三个轴构成x y z

• X轴：水平向右 右边正值，左边负值
• Y轴：垂直向下 下边正值，上边负值
• Z轴：垂直屏幕 向外正值，往里负值 （视觉上看越近就越大）

3D移动 translate3d：

      transform: translateX(100px) translateY(100px) translateZ(100px);
      /*3d移动简写 transform：translate3d（x，y，z）*/
      transform:translate3d(100px,100px,100px);

注意：
1.如果只想写y z 应该 transform：translate3d（0，y，z）不能省略
2.translateZ后面的单位我们一般跟px

透视 perspective：
透视也称为视距即人眼到屏幕的距离 透视的单位是像素

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

   <style>
      body {
   
        perspective: 500px;
      }
      div {