CSS3 Reference


transform-style

変形スタイル

試す

コード

#containe {
  perspective: 500;
  -webkit-perspective: 500;
}
#containe p {
  transform-style: preserve-3d;
  transform: translateZ(3em);

  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ(3em);
}

サンプル


transform-style: preserve-3d;
transform: translateZ(3em);

-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(3em);

対応ブラウザ

Firefox
まだ
Chrome/Safari
3.1~
Opera
まだ
InternetExplorer
まだ

パラメータ

flat | preserve-3d
初期値flat
適用ブロックレベル要素とインラインレベル要素
継承しない
レベル3
%の解釈-
適用メディアVisual
参考文献CSS 3D Transforms Module Level 3#4 The ‘transform-style’ Property

解説

変形スタイルを指定します。

キーワード”flat”は2次元を、”preserve-3d”は3次元を示します。

3次元を指定すると、perspective関連のプロパティが有効になり、またtransformで奥行きをもった変形ができるようになります。

なお、3Dの変形スタイルは今のところ、MacOSおよびiOSのSafari限定です。

コメントする


トラックバック

投稿されたコメント