CSSのtransform-styleで子要素の3D描画方法を設定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

transform-styleプロパティは、要素が3D変形を行う際、その子要素が3D空間で変形されるか、またはフラットに描画されるかを指定します。

スポンサーリンク

transform-styleの値とその効果の一覧

  • flat: 子要素は2Dで描画されます。
  • preserve-3d: 子要素は3D空間で変形されます。

注意点と関連情報

このプロパティを使うと、親要素に対して3D効果を加えた場合に、その子要素が3Dでレンダリングされるかどうかを制御できます。デフォルトではflatが指定されており、3D効果は無視されます。3D効果を維持するには、preserve-3dを使用します。

transform-styleが効かない時の原因と対策

子要素に対して3D変換が適用されていない

transform-styleは、親要素に3D変換が適用される際、子要素にもその3D変換の効果を適用するかどうかを制御するプロパティです。しかし、親要素のtransform-styleを設定しても、子要素にtransformが適用されていないと効果がわかりません。

対策: 子要素にtransformプロパティを設定します。例えば、親要素にtransform-style: preserve-3d;を設定した後、子要素にtransform: rotateY(45deg);を適用すると、3D変換効果が適切に反映されます。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
  text-align: center;
  perspective: 600px;
}

.css-sample-box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  margin: 0 auto;
  transform: rotateY(45deg);
}

.css-sample-child {
  width: 50px;
  height: 50px;
  background-color: #FF6347;
  transform: translateZ(50px);
}

transform-style: flat

子要素が2D平面で描画され、3D効果は無視されます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-flat">
    <div class="css-sample-child"></div>
  </div>
</div>

CSSコード

.css-sample-flat {
  transform-style: flat;
}

表示結果

transform-style: preserve-3d

子要素が3D空間で描画され、親要素と一緒に回転などの3D効果を受けます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-preserve-3d">
    <div class="css-sample-child"></div>
  </div>
</div>

CSSコード

.css-sample-preserve-3d {
  transform-style: preserve-3d;
}

表示結果

まとめ

  • transform-styleプロパティは、要素の3D変形において、子要素が3D空間で描画されるか、2D平面で描画されるかを制御します。
  • デフォルトはflatで、3D効果は無視されます。
  • 3D効果を子要素にも適用する場合は、preserve-3dを使用します。
  • 親要素にperspectiveプロパティを指定することで、3D効果を確認できます。
スポンサーリンク