3D変形を行列で指定

matrix3d / 3D変形を行列で指定

matrix , matrix3d 値チェックツール

ツール

matrix変換

※ FF , GC , IE10 で確認 (※Opera31未対応)

transform:

ツールについて

transformの様々な変形プロパティをブラウザが計算し、最終的に matrix か　matrix3d の1個の値になっています。
※ 例えばcssで [ transform : translate(100px,10px) rotate(30deg) ; ] と設定している要素のstyle値をjavascriptで取得してみると、transformの値は [ matrix(0.866025, 0.5, -0.5, 0.866025, 100, 10) ] となっています。

ということで、どんなmatrix (or matrix3d) 値になるかを確認するための簡易ツールを作ってみました。
枠の下のテキストフォーム上にtransform:以降のプロパティを記述し、変換ボタンをクリックすると、正しい指定の場合はmatrix変換の黄色いボックスが指定の状態にtransformし、ボタンの下にブラウザが matrix 又は matrix3d に変換した値を表示します。
Ｚ軸方向に変化がある場合はたいていmatrix3dになるかと思います。

以下、入力サンプル例。（下記をクリックすると、上記フォームに値を入力します）
値クリアー translate3d(20px,10px,5px) scale3d(2,0.5,0.8) rotate3d(1,2,3,30deg) translate(100px,10px) scale(1.5,0.5) skewX(60deg) skewX(45deg) skewY(30deg) translateX(-50px) scale(1.2) skew(45deg,30deg) rotate(30deg) rotateX(60deg) rotateY(45deg) rotateZ(180deg) rotateZ(-90deg) perspective(100px) rotateY(30deg) rotateX(45deg) rotateX(45deg) rotateY(30deg)

考察

translate3d(20px,10px,5px) = translateX(20px) translateY(10px) translateZ(5px)
= matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 10, 5, 1)

scale3d(2,0.5,0.8) = scaleX(2) scaleY(0.5) scaleZ(0.8)
= matrix3d(2, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1)

matrix や matrix3d を使って要素の変化をベクトル計算する式については、ネット検索でいろいろ教えてくれてるページが見つかるかと思いますが、移動の場合はここ、拡大縮小の比率はここ、とか、回転の場合は sin cos 計算して…などの内容については、別にブラウザ作るお仕事でなければ、気にしなくてもいいかと思います。

使う時の注意点として、
[1] プロパティの記述順が違うと、大抵違う変化になる、
[2] rotate(360deg) と rotate(0deg) は、どちらも matrix(1, 0, 0, 1, 0, 0) なので、animationの指定時には注意、
[3] skew で 90deg, -90deg, 270deg, -270deg は危険、
というのを一応気にしながら使う必要があるかと思ったりします。

参考：プロパティの記述順の違いが分かるmatrix3dの値の例

rotateY(30deg) rotateX(45deg)
= matrix3d(0.866025, 0, -0.5, 0, 0.353553, 0.707107, 0.612372, 0, 0.353553, -0.707107, 0.612372, 0, 0, 0, 0, 1)

rotateX(45deg) rotateY(30deg)
= matrix3d(0.866025, 0.353553, -0.353553, 0, 0, 0.707107, 0.707107, 0, 0.5, -0.612372, 0.612372, 0, 0, 0, 0, 1)

matrix (matrix3d)値を比較すると違う値になってますので、記述の順番が違うと違う結果になる、というのがこの点からも確認できるかと思います。

参考：ブラウザによって計算結果が違う場合もあります

ブラウザによって計算結果の表示が微妙に異なる場合があります。
rotate(30deg) = matrix( 0.866025, 0.5, -0.5, 0.866025, 0, 0) は FF58 GC63 Opera50 IE10 で同じでしたが、

[FF58] rotateZ(180deg) = matrix(-1, 0, 0, -1, 0, 0)
[GC63] rotateZ(180deg) = matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)
[O 50] rotateZ(180deg) = matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)
[IE10] rotateZ(180deg) = matrix3d(-1, -8.74228e-008, 0, 0, 8.74228e-008, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

[FF58] rotateZ(90deg) = matrix(0, 1, -1, 0, 0, 0)
[GC63] rotateZ(90deg) = matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)
[O 50] rotateZ(90deg) = matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)
[IE10] rotateZ(90deg) = matrix3d(-4.37114e-008, 1, 0, 0, -1, -4.37114e-008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)