CSS 3D ビュープロパティの解釈: 変換と遠近法-CSSチュートリアル-php.cn

CSS 3D ビュープロパティの解釈: 変換と遠近法

WBOY

リリース： 2023-10-24 08:11:09

オリジナル

1231 人が閲覧しました

CSS 3D 视图属性解读：transform 和 perspective

CSS 3D ビュープロパティの解釈: 変換とパースペクティブ、特定のコードサンプルが必要です

はじめに:
現代の Web デザインでは、3D 効果は非常に重要なものになっています。重要な人気の要素。 CSS の変換プロパティと遠近法プロパティを使用すると、Web ページに 3D 視覚効果を簡単に追加して、Web ページをより鮮やかで魅力的なものにすることができます。この記事では、これら 2 つのプロパティについて説明し、具体的なコード例を示します。

1. Transform 属性:
transform 属性は CSS の非常に強力な属性で、要素の回転、拡大縮小、移動、傾きなどのさまざまな変形操作を実現できます。 3D ビューでは、transform 属性を使用して 3D 空間内の要素を変換できます。

一般的に使用される変換関数の一部を次に示します:

Rotation:
transform:rotform:rotateX(45deg); // X 軸を中心に 45 度回転します
transform: rotateY( 45deg); // Y 軸を中心に 45 度回転
transform:rotateZ(45deg); // Z 軸を中心に 45 度回転
Scale:
transform:scale(2) ; // X 軸と Y 軸で 2 倍に拡大します
transform:scaleX(2); // X 軸で 2 倍に拡大します
transform:scaleY(2); // Y 軸で 2 倍に拡大します
Move:
transform: translationX(100px); // X 軸上で 100 ピクセル移動
transform: translationY(100px); // Y 軸上で 100 ピクセル移動
transform: translationZ (100px ); // Z 軸上で 100 ピクセル移動
Tilt:
transform: skewX(45deg); // X 軸に沿って 45 度傾けます
transform: skewY(45deg); // Y 軸に沿って 45 度傾斜しています

さまざまな変換関数を組み合わせることで、複雑な 3D 変換効果を実現できます。たとえば、回転、スケーリング、および移動を使用して 3D 立方体を作成できます。

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

ログイン後にコピー

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

ログイン後にコピー

このコードは、各面に半透明の黒の背景色を持つ 200x200 ピクセルの立方体を作成します。 3D 空間内の各面の変換は、transform アトリビュートを通じて実現できます。たとえば、面の 1 つにtranslateZ(100px)を指定すると、視点に対して相対的に前方に 100 ピクセル移動して、立方体の前面を形成できます。

2. 遠近属性:
遠近属性は、要素の遠近効果を設定するために使用されます。遠近点の位置と観察距離を設定することで、3D 変換効果のパフォーマンスに影響を与えることができます。。パースペクティブは、transform 属性とともに使用する必要もあります。

遠近感属性を設定して、要素が 3D 空間で遠方および近方の効果を生み出すようにすることができます。例:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}

ログイン後にコピー

この例では、パースペクティブ: 1000px を設定することで、要素に 1000 ピクセルの遠近効果を与えます。パースペクティブの値を変更することで、3D 空間内の要素の距離を調整できます。

概要:
CSS の変換プロパティと遠近法プロパティを使用すると、Web ページに 3D 効果を簡単に追加できます。変換属性は、3D 空間内の要素の回転、拡大縮小、移動、傾きなどの変換操作を実装できます。パースペクティブ属性は、3D 空間内の要素のパースペクティブ効果を制御できます。この 2 つを組み合わせることで、バリエーション豊かな 3D 効果を作成できます。

参考: