【CSS Modules】transform-styleプロパティの使い方

transform-styleプロパティは、要素の子要素が3D空間内でどのように振る舞うかを定義する設定を保持するプロパティです。このプロパティは、要素自身に適用された3D変換が、その子要素にどのように影響を与えるかを制御するために使用されます。特に、CSSのtransformプロパティを用いて3D変換を適用する際に重要な役割を果たします。

設定できる値は主に二つあります。「flat」と「preserve-3d」です。デフォルト値であるflatを指定した場合、子要素に適用された3D変換は、親要素の平面上で平坦化されて描画されます。つまり、子要素は親要素のローカルな2D平面内に固定され、親要素自身の3D変換空間には直接参加しません。そのため、複数の子要素が重ねて配置されていても、奥行きのある3D表現にはなりません。

一方、「preserve-3d」を指定すると、子要素は親要素と同じ3D空間に参加します。これにより、子要素は親要素の3D変換の影響を受けつつ、自身に適用された3D変換によって奥行きのある位置に配置され、全体として一つの統一された3Dオブジェクトとして描画されます。例えば、複数の要素を組み合わせて立方体のような複雑な3D構造を作成する場合や、要素に奥行きのあるアニメーションを適用する際に、このpreserve-3dが必要になります。このプロパティを使うことで、よりリアルで立体的なウェブコンテンツを構築することが可能になります。

Copy
1.element {
2  transform-style: preserve-3d;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません