transform-style - 子要素が3D空間の位置を保持するかを指定する

投稿日: / 更新日:

スタイルシートのtransform-styleは、子要素が3D空間の位置を保持するか否かを指定するためのプロパティです。

サンプルコード

transform-styleを指定したサンプルコードです。この要素の子要素は、全て3D空間における位置を保持します。transformと組み合わせないと意味がありません。

div {
	transform-style: preserve-3d ;
}

デモ

上の要素(茶)にはtransform-styleにpreserve-3dを指定して、子要素(青)に3D空間の位置関係を保持させました。対して、下の要素(茶)にはflatを指定したため、子要素(青)は3D空間における位置関係を失っています。それぞれ子要素(青)は、親要素(茶)を軸に、水平方向に回転しています。上の例では位置関係が考慮され、回転中、半分は親要素の後ろに隠れてしまいます。対して、下の例では位置関係が無視されて、単純に全体が見えながら回転しています。まるで紙に描いた絵のように、フラット(flat)な存在になってしまったわけです。

値の指定

指定できる値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のtransform-styleには、bodyに指定された値(preserve-3d)が引き継がれる。
initialプロパティの初期値が適用される。この場合、値はflat(位置関係を無視)となる。
flat初期値。3D空間における位置関係は無視される。2016年2月現在、Safariではこの値が有効にならない。
preserve-3d3D空間における位置関係が保持される。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

  • Chrome

    ●

    -

    時期不明

  • Firefox

    ●

    -

    時期不明

  • Safari

    ●

    -

    時期不明

  • Ie

    ●

    -

    時期不明

  • Edge

    ●

    -

    時期不明

  • Opera

    ●

    -

    時期不明

  • Safari(iOS)

    ●

    -

    時期不明

  • Ie Mobile

    ●

    -

    時期不明

  • Chrome

    ●

    -

    時期不明

  • Android

    ●

    -

    時期不明

  • FF Mobile

    ●

    -

    時期不明

  • Opera Mobile

    ●

    -

    時期不明