css3のtransform（含む3D）まとめ

cssでwindows8のロゴを作っていた人がいて，そのソースを見たらperspectiveを使って3D効果を出しているじゃないか．あれ，3D変換ってまだ動かないんじゃなかったっけと調べてみたら，firefox（nightly?）では何とか基本部分は実装されているみたい．そこでcss3のtransformの仕組みの基本についてまとめてみた．
但し仕様レベルでの細かい詰めがまだまだのようなので，将来的に変更されるかもしれない．

座標軸

座標変換をする際の基準と方向及び回転の方向は次の通り．

• x軸…左→右
• y軸…上→下
• z軸…奥→前

各軸の回転方向（rotate方向）は図の通り．軸を立てて（負値を下，正値を上に見立てて）時計回り．

3D変形の原理

※以下はcss3の仕様書とfirefoxでの挙動を追って調べた結果を自分なりに分かりやすくまとめたもので，細かい部分で間違っている可能性があります．

transformによる３D変形においては視点を考える必要があり，視点の位置をperspective-origin，視点の高さ（深さ）をperspective（単位:px）で指定する．

 

要素がスクリーンに配置されると，スタイルシートのtransform属性で指定した関数（skew，rotate等）により要素が3D空間内に移動する．ここで実際の画面に表示される図形は，3D空間内に移動した要素をperspective-origin，perspectiveにて設定された視点からスクリーン上に射影したしたものとなる．
（このような変換は一般に4×4行列による表現が可能→matrix3d関数を使うことで一括指定）

視点の高さによりレンダリングされる要素の変形度合いが変化する．一般にperspectiveの値が小さいほど遠近感が大げさになり，値が大きくなるほど俯瞰図に近くなる．直感的にも，遠いものほど平坦に見えることからこれは自然な定義と言える．
値が0（初期値）の場合は無限遠点からの射影とされ，3d効果が無くなる…つまり，通常時のレンダリングと同等となる．

関連するスタイル設定値

ここらへん，細かいところまでは調べきっていない．あれこれ考えるより実際に試してみたほうが早いと思う．

• transform-origin
  変形を行う際の基準点を指定する．要素内の仮想座標系を想定する．
  x座標，y座標，z座標の順で指定可能．デフォルト値:(50%,50%,0)
• transform
  要素の変形を行う．下記の関数を指定する．複数の関数を指定することが出来る．後ろに記述したものから実行．（変形の順番は入れ替えることが出来ない…2次元行列の積の非可換性）
  関数は以下の通り．X，Y，Zが付くものはその軸の方向のみに変形を行うもの．
  • rotate
    要素の回転．
  • rotate3d(x,y,z,deg)
    回転軸を3次元ベクトル値で指定し，その上での回転を施す．
  • scale
    要素の拡大・縮小．
  • skew
    要素の傾斜指定．
  • translate
    要素の平行移動．
  • matrix
    要素の描画領域の一次変換行列（3×3行列）による変形．
    →上記のrotate,scale,skew,translateを一度に指定できる仕組み．
  • matrix3d
    要素の描画領域の一次変換行列（4×4行列）による3D変形．
    →上記のrotate,scale,skew,translateを一度に指定できる仕組み．
  • perspective
    3D視点の位置の指定する．単一要素を変形する際，先頭に記述するようにする．
• perspective
  3D視点の位置を指定する．（親要素用）
  複数要素の変形を統一して行う為のもの．
• perspective-origin
  3D効果の消失点を指定する．（親要素用）
  複数要素の変形を統一して行う為のもの．
• transform-style
  変形後の扱いを指定する．
  flat（デフォルト）…変形後の要素は他の要素と同様に扱われる．レンダリング順は一般の要素と同様に要素の出現順，z-index順に依存する．
  下の例ではbottom要素の後にmain要素が指定されているので，mainの方が上に描画されている．
  preserve-3d…3D空間に配置されたものとして扱う．よって重なりの優先順位はz座標に依存する．
• backface-visibility
  背面（反転画像）の表示有無．
  visible…表示（デフォルト）要素が反転して表示される．
  hidden…非表示．昔のポリゴンゲームの透過のような感じに透過する．
  下の例ではBOTTOM要素が非表示となる．

 左からperspective:300px，perspective:600px，transform-style:flat，backface-visibility:hidden.

firefoxの最新α版で動作を確認したもの．面を回転→平行移動させて辺を重ね立方体を作ってみた．キレイに表示されているのだが，他のスタイルと組み合わせると途端に動作が不安定になるので，本格利用はまだ先になるだろう．

参考：
https://developer.mozilla.org/En/CSS/Using_CSS_transforms