transform-styleで子要素の描画がフラットか立体的か指定【CSS】

transform-styleプロパティは、3D空間で変形する要素の子要素が同一平面上にフラットで描画するか、それとも3D空間で立体的に描画するかなどの配置方法を指定するプロパティです。

transform-styleの値の指定方法

transform-styleプロパティでは、以下のような値を指定できます。

flat

flatを指定すると、子要素は3D空間上で親要素と同じ平面上に配置されます。

preserve-3d

preserve-3dを指定すると、子要素に個別に指定した3D空間での変形が適用されるので、親要素と子要素は3D空間上で別々に配置されます。