HTML(28)——空間変換

2024-07-12

空間: 座標軸角度から定義される 3 つの座標軸 XYZ は 3 次元空間を形成します。Z 軸位置は視線方向と同じです。

空間変換

パン

属性:

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

値: ピクセル単位値/パーセンテージ

デフォルトでは、Z 軸の移動は表示されません。

視距離

機能: 観察者と z=0 平面の間の距離を指定し、要素に遠近効果を追加します。

遠近効果: 大きく近い、遠くに小さい、現実に近い、仮想的に遠い

属性:(親に追加、値の範囲は 800 ～ 1200)

視点: 視距離。


  <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>