HTML(28)——空间转换

A阳俊yi2024-07-10 23:10

空间：是从坐标轴角度定义的XYZ三条坐标轴构成了一个立体空间 Z轴位置与视线方向相同

空间转换

平移

属性：

transform: translate3d(x,y,z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值：像素单位数值/百分比

默认情况下我们看不到Z轴的平移情况

视距

作用：指定了观察者与z=0平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性：（添加给父级，取值范围800-1200）

perspective:视距;

复制代码

  <style>
    /*空间转换*/
    .father {
      perspective: 1000px;

    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: blue;
      transition: all 0.5s;
    }

    .box:hover {
      transform: translateZ(-400px);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="box"></div>
  </div>
</body>

当鼠标悬停时，产生近大远小的效果，此时Z轴移动-400px

旋转

左手法则：

属性：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向。其他手指弯曲方向为旋转正值方向

transform:rotateZ(值)

transform:rotateX(值)

transform:rotateY(值)