CSS3: transform-style プロパティ - 子要素のフラットな描画,立体的な描画

■ 概要

項  目説  明
記述形式 セレクタ {transform-style: }
値 の形式 flatpreserve-3d
初 期 値 flat
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 2D変形,または,3D変形の対象要素
継  承 しない

■ 解説

transform-styleプロパティ は,子要素のフラットな描画や立体的な描画を指定します。

指定できる値の形式は,以下のとおりです。

説  明
flat 3D変形を行った際に子要素にもそれを適用後,要素の2D平面上に平面的に表示します。
preserve-3d 3D変形を行った際に子要素は3D空間の中の位置を保持した形で表示します。

transform-styleプロパティの値に,flatを指定して,x-軸まわりや y-軸まわりの 3D変形を行うと,z-座標の値が正や負である要素の場合,子要素は一緒に z-軸の正や負の値の位置に移動され要素の平面上に乗った状態で 2D表示されます。  一方,preserve-3d を指定した場合には,子要素に対しては 3D空間中での位置が保持されて表示されます。  ただし,変形の指定内容によっては,3D空間の中の要素が祖先要素の背後に隠れる形になって,表示されなくなる可能性があります。

■ 使用例( transform-style プロパティの利用)

現在準備中です。

■ 備考

【参考ページ】