[CSS] 3D変形(transform)のまとめ

2015 年 7 月 18 日 Categories: CSS |

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表現に使うくらいにとどめておいたほうがいいかも。