CSS3

：

プロパティ

：

transform-style

　 編集：2022.07.08 by T.A.

→●、mdn

変形に於ける3D／2D表現。

名前 transform-style
値 flat | preserve-3d
初期値 flat
適用対象 変形可能な要素
継承 されない
百分率 受容しない
算出値 指定されたキーワード
正準的順序 文法に従う
アニメーション型 離散的
使用値 グループ化プロパティ値が［在るならば flat／無いならば 指定されたキーワード］

transform-style 用の算出値 preserve-3d は、［積層文脈、すべての子孫用の包含ブロック］の両者を確立する。使用値が preserve-3d になる場合、3D 描画文脈も［確立する／拡張する］。

flat
要素の子要素を要素自身の平面上に配置することを示します。
<DIV style="width:200px; border:1px solid black;">
 <DIV style="border:1px solid red;
  transform-style:flat;
  background:#f69d3c;
  transform:perspective(200px) rotateY(30deg);
 ">あああ
  <DIV class="numeral" style="
   background-color:#e66465;
   transform:rotate3d(1,1,1,45deg);
  ">いいいいいい
  </DIV>
 </DIV>
</DIV>

preserve-3d
要素の子要素を 3D 空間に配置することを示します。
<DIV style="width:200px; border:1px solid black;">
 <DIV style="border:1px solid red;
  transform-style:preserve-3d;
  background:#f69d3c;
  transform:perspective(200px) rotateY(30deg);
 ">あああ
  <DIV class="numeral" style="
   background-color:#e66465;
   transform:rotate3d(1,1,1,45deg);
  ">いいいいいい
  </DIV>
 </DIV>
</DIV>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：