最終更新日

transform-styleプロパティ

transform-styleは、3D変形が指定されている要素内での、子要素の表示方法を指定するプロパティです。

指定できる値は「flat」と「preserve-3d」のいずれかです。

値に「flat」を指定した場合、その要素に含まれるすべての子要素は、3D変形した親要素の2D平面内へ平面化されて表示されます。

値に「preserve-3d」を指定した場合、子要素には、自信に指定された3D空間内の配置が適用されます。

以下は、関連プロパティです。

transform
transform-origin
perspective
perspective-origin
backface-visibility

CSS3での変更点
・transform-styleは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
flat ブロックレベル要素、インラインレベル要素 なし
説明
flat すべての子要素は、3D変形した親要素の2D平面内へ平面化されて表示されます。(初期値
preserve-3d 子要素には、自信に指定された3D空間内の配置が適用されます。
サンプルコード
transform-style: flat;
transform-style: preserve-3d;
参考文献:CSS Transforms外部リンク
HOME