[CSS] 3D変形（transform）のまとめ
CSS3からは、要素の3D表現が可能になっている。
基本的には、2D変形の機能と同じ形式。
ただし、ブラウザごとに微妙に動作が異なるので注意。
また、全体的にSassなどのメタ言語を使わないと厳しいか。
基本
基本的に、transformプロパティの値として各種の関数形式で指定していく。
引数が複数ある場合は、関数形式なのでコンマで区切る。
例：rotate3dの場合
transform: rotate3d(70deg, 30deg, 10deg);
すでに大半のブラウザで対応していると思われるが、念のため「-webkit-」などのベンダー・プレフィックスをつけておいたほうがいいだろう。
座標は左手座標系
transformでの座標系は、DirectXと同じ左手座標系。
といっても、CSSなのであくまで左上原点であり、y座標は下方向がプラスになる。
transform-originプロパティ
各種変形を適用する際に基準となる原点（アンカーポイント）を、ローカル座標で指定する。
プロパティなので、x（水平方向）、y（垂直方向）、z（奥行き）の値をスペース区切りで指定する。デフォルト値は50% 50% 0。
xとyに関しては、left・center・right、top・center・bottomのキーワードで指定することも可能。
transform-origin: left top;
transform-styleプロパティ
値は、flat（デフォルト）とperspective-3dのみ。
子要素を親要素の2D平面に投影するか（flat）、実際の3Dとするか（perspective-3d）。
flatのほうは、特定の要素の平面にレンダリング結果をベイクするようなもの（？）。
perspective()：正投影（遠近感）の指定
その名のとおり、正投影の深度（遠近感）を指定する。
引数は、視点からz値が0の位置までの距離を指定する。負の値は指定できない。
matrix3d()：行列の適用
3Dの計算・プログラミングでよく使う、4×4の正方行列を16個の引数として適用する。
transform: matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
3Dの知識が豊富で、かつSassなどのメタ言語を扱えるのなら、こちらのほうが手っ取り早い。
しかし、そうでなくても、下記の各種関数を使えば行列の知識がなくても3D表現は可能。
translate3d()：平行移動
translate3d(x, y, z)
translateX()
translateY()
translateZ()
transform: translate3d(10, -10, 5);
値は、pxなどの数値で指定していく。
translate3d()の第2引数以降は省略できる。デフォルト値は0。
scale3d()：拡大縮小
scale3d(x, y, z)
scaleX()
scaleY()
scaleZ()
transform: scale3d(1, 1.5, 1)
値は1を100％とする実数値で指定する。
なお、scaleX()などで指定した場合、他の軸の比率は1となる。
マイナスの値を指定した場合、表示を反転させることができる。
rotate3d()：回転
rotate3d(vx, vy, vz, deg)
rotateX()
rotateY()
rotateZ()
値は度数法で「deg」を使い、マイナスの値も指定できる。
rotate3d()では、いわゆるクオータニオンを使う。最初の3つの引数に方向ベクトルを指定する。正規化されていないくても自動的に処理されるが、それぞれの値の2乗の合計が1にならないと、つまりクオータニオンとして計算可能な値でないと、rotate3d()の処理そのものがキャンセルされる。
なお、rotateX()などで個別に各軸の回転を指定する場合は、特定の軸回転しかできなくなる「ジンバルロック」の問題に気をつける必要がある。
所感
全体としてシンプルだが、やや面倒なのでSassなどを使わないと全体の調整が難しい気がする。
ちょっとした3D表現に使うくらいにとどめておいたほうがいいかも。