CSS 3D 変換プロパティ: 変換と遠近法

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

CSS 3D 変換プロパティは、いくつかの簡単なコードで実装できる強力なテクノロジです。効果。その中で、最も一般的に使用される 2 つのプロパティは、transform と experience です。

1. Transform 属性

transform 属性は、要素の回転、拡大縮小、傾き、移動などの操作を実行するために使用されます。異なるパラメータを設定することで、異なる効果を実現できます。

1. Rotation

rotate パラメータを設定することで要素を回転できます。例:

div {
  transform: rotate(45deg);
}

2. Scale

scale パラメーターを設定すると、要素のスケーリングを実現できます。例:

div {
  transform: scale(1.5);
}

3. skew

skew パラメータを設定することで要素を傾けることができます。例:

div {
  transform: skew(30deg);
}

4. Move

translate パラメータを設定することで要素を移動できます。例:

div {
  transform: translate(100px, 50px);
}

2. 遠近属性

遠近属性は、3 次元シーン内の観測点を定義するために使用され、要素の遠近効果に影響を与えます。さまざまなパラメータを設定することで要素の視点を変更できます。

div {
  perspective: 800px;
}

パースペクティブ属性を設定した後、transform-style 属性を使用して、要素の子要素にパースペクティブ効果を適用する必要があります。

div {
  perspective: 800px;
  transform-style: preserve-3d;
}

3. 例への適用

次の例は、変換プロパティと遠近法のプロパティを使用して立方体効果を実現する方法を示しています。

HTML コードは次のとおりです:

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

CSS コードは次のとおりです:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: spin 6s linear infinite;
}

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

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

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

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

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

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

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

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

上記のコードは、単純な立方体を実装し、変換プロパティと遠近プロパティを通じて回転と遠近効果を実現します。 。コードを自分で実行して効果を確認できます。

要約すると、CSS の 3D 変換プロパティのtransformとperspectiveは、絶妙な視覚効果を作成するための重要なツールであり、簡単なコードでさまざまなクールなアニメーション効果を実現し、Webページの視覚的な魅力を高めることができます。

以上がCSS 3D 変換プロパティ: 変換と遠近法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。