CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtransform-styleプロパティの使い方をわかりやすく解説

transform-styleプロパティとは

CSSのtransform-styleプロパティは、ネスト（入れ子）された子要素を3D空間上でどのように描画するかを指定するためのプロパティです。親要素に3D変形（rotateやtranslateなど）を適用した場合、このプロパティの設定によって、子要素も同じ3D空間内で変形されるかどうかが決まります。

transform-styleで指定できる主な値

  • flat（初期値）： 子要素は親要素の平面上に押しつぶされて描画され、3D空間は保持されません。
  • preserve-3d: 子要素が親要素と同じ3D空間を共有し、立体的な変形がそのまま維持されます。

3Dアニメーションやカード反転エフェクトなどを作りたい場合は、preserve-3dを指定するのがポイントです。

transform-styleプロパティの実装例

以下のコードでは、入れ子になった3つのdiv要素に対してスタイルを適用し、最も内側の要素にtransform-style: preserve-3d;を設定しています。回転（rotate）と変換原点（transform-origin）を組み合わせることで、3D空間での描画を確認できます。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
      .demo2 {
        width: 200px;
        height: 200px;
        background-color: orange;
      }
      .demo3 {
        width: 100px;
        height: 100px;
        background-color: blue;
        transform: rotate(10deg);
        transform-origin: 30% 40%;
        transform-style: preserve-3d;
      }
    </style>
  </head>
  <body>
    <h1>Rotation</h1>
    <div class = "demo1">Demo
      <div class = "demo2">Demo
        <div class = "demo3">
          Demo
        </div>
      </div>
    </div>
  </body>
</html>

まとめ

transform-styleプロパティを使いこなすことで、親子関係にある要素をまとめて立体的に変形させることができます。単純な2D的な見た目でよければ初期値のflatで問題ありませんが、本格的な3D表現を行いたい場合はpreserve-3dを忘れずに指定しましょう。

  1. CSSのtransform-originプロパティの使い方を解説！変形の基準点を変更する方法

    transform-originプロパティとは？ CSSのtransform-originプロパティを使うと、transformで変形（回転・拡大縮小・傾斜など）される要素の基準点（原点）を自由に変更できます。 デフォルトでは要素の中央（50% 50%）が基準点に設定されていますが、このプロパティを指定することで、回転やスケール変換の起点を要素の任意の位置に移動させることが可能です。 値の指定方法は主に以下のとおりです。 キーワード： top、bottom、left、right、center など パーセンテージ： 30% 40% のように要素のサイズに対する割合で指定 長さ（px、em な

  2. CSSのtransformプロパティで要素を変形させる方法

    CSSのtransformプロパティは、要素に対して2Dまたは3Dの変形を適用するために使用されます。回転（rotate）、拡大縮小（scale）、移動（translate）、傾斜（skew）などの変換を組み合わせることで、静的なページに動きや立体感を加え、より視覚的に魅力的なデザインを実現できます。 transformプロパティの基本的な使い方 transformプロパティには、主に以下のような変換関数を指定できます。 rotate()：要素を指定した角度で回転させます scale()：要素のサイズを拡大・縮小します translate()：要素をX軸・Y軸方向に移動させます skew()