CSS3 Pre-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限定です。

トラックバック

投稿されたコメント