Transform Style プロパティ

最終更新：2026-09-13

transform-style Transform Style プロパティ

transform-style プロパティは、要素の子が空間内で 3D 位置を維持するかどうかを決定します。デフォルト値 flat は子を親の 2D 平面に押しつぶします。preserve-3d では子を独立した 3D 空間に配置でき、perspective と組み合わせることで真に立体的なシーンを構築します。

カテゴリ
初期値	flat
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

transform-style: flat | preserve-3d;

⚙️ 値

値	タイプ	説明
`flat \| preserve-3d`	キーワード	子が 3D 位置を維持するかどうか

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
transform-style	✓ v36	✓ v12	✓ v16	✓ v9	✓ v23
すべての主要ブラウザーでサポート

重要： preserve-3d は継承されません。3D 空間を維持する親に明示的に設定する必要があり、その親には通常、奥行きを見せるために perspective も必要です。

注意： overflow: hidden、opacity、filter のようなプロパティは新しい平面化コンテキストを強制し、preserve-3d の 3D 効果を壊すことがあります。

❓ よくある質問

Qtransform-style: preserve-3d を使う必要があるのはどのようなときですか？

A子が親の 3D 空間内で「奥行き」を持つ必要があるとき — 3D 立方体、カードの裏返し、重ね層などです。1 つの平面上での回転・拡縮・移動のような通常の平面変換には、デフォルトの flat で十分です。flat はすべての子を親の平面に押しつぶすため、見えるのは 2D 効果だけです。

Qpreserve-3d を設定したのにまだ 3D 効果がないのはなぜですか？

A最も一般的な原因は perspective の欠如です。perspective がないと遠近感が生まれず、回転に奥行きが現れません。2 番目の原因は、親または祖先に overflow: hidden、opacity < 1、filter のいずれかがあることです — どれも 3D 空間を平面に押しつぶします。この 2 点を確認すればたいてい解決します。

Qtransform-style: preserve-3d と perspective の違いは何ですか？

Aperspective は視点から z=0 平面までの距離を定義し、透視の強さを決めます。親に宣言すればすべての 3D 子に一律に影響し、あるいは単一の要素に対する transform: perspective() 関数として使えます。transform-style: preserve-3d は子が 3D 位置を維持するかを決定します。両方を組み合わせて初めて真の 3D シーンが作れます。

Qtransform-style: preserve-3d のブラウザ対応はどうですか？

Aすべてのモダンブラウザが preserve-3d をサポートしていますが、Safari は 3D 変換のサポートにばらつきの歴史があり、一部の組み合わせでは静かに flat にダウングレードされることがあります。Safari で 3D が効かない場合は、親の 3D コンテキストへの依存を避け、perspective() 関数を使って子要素に直接 3D 変換を適用してください。