最終更新日 2021年6月20日

transform-styleプロパティ

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

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

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

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

CSS3での変更点

・transform-styleは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
flat	ブロックレベル要素、インラインレベル要素	なし

値	説明
flat	すべての子要素は、3D変形した親要素の2D平面内へ平面化されて表示されます。（初期値）
preserve-3d	子要素には、自信に指定された3D空間内の配置が適用されます。

サンプルコード

transform-style: flat;
transform-style: preserve-3d;

参考文献：CSS Transforms

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。