使ってますか？ CSS matrix3d

比留間 和也HTMLファイ部／人事部

https://twitter.com/edo_m18 http://qiita.com/edo_m18

matrix3dは 使ってますか？

matrix3dのイメージ

• 引数多い

• 行列とか聞きなれない

• 適当に値入れても想像通り動かない

30°回転させただけで数値がたくさん

((((；ﾟДﾟ))))

でもtransform-functionを使えば 手軽に3Dの効果が得られる

• rotate() / rotate3d()

• translate() / translate3d()

• scale() / scale3d()

Demo

ゲームも作れる

CSS3Dで実現したルービック・キューブ

でも・・・

ユーザの操作を逐一適用していくと・・

2回回転を適用

24回適用・・・((((；ﾟДﾟ))))

延々と増えていく…

(ﾟ∀ﾟ)!!

回転自体をまとめちゃえばいいんじゃね？(ﾟ∀ﾟ)

BUT!!

適用する順番が違うと結果が異なる

http://jsdo.it/edo_m18/1EGy

( ꒪⌓꒪)…

なんとかひとつにまとめられないかな・・・

できます

そう、行列ならね （振り出しに戻る）

行列には回転や平行移動を表す決まった形がある

平行移動を表す行列

拡大・縮小を表す行列

X軸に対する回転を表す行列

Y軸に対する回転を表す行列

Z軸に対する回転を表す行列

行列を掛け算すると ひとつの行列になる

| 1 5 9 13 | | 11 15 19 23 | | 370 482 594 706 | | 2 6 10 14 | x | 12 16 20 24 | = | 420 548 676 804 | | 3 7 11 15 | | 13 17 21 25 | | 470 614 758 902 | | 4 8 12 16 | | 14 18 22 26 | | 520 680 840 1000 |

つまり

ひとつの行列で 複数の結果を表すことができる

ktkr(ﾟ∀ﾟ)!!

ただ、行列の計算は 結構めんどう

行列の計算はライブラリに 任せちゃいましょう

行列関連のライブラリ• ewgl-matricesWebGL 用の超高速行列ライブラリ

• glMatrix高性能WebGLアプリ製作の為の、行列とベクトルのJavaScriptライブラリ

• mjsWebGL用に最適化されたベクトルと行列の計算を行うJavaScriptライブラリ

• Sylvesterベクトルや行列を操作する為のオープンソースライブラリ。WebGL用として最適化されたものではありませんが、非常に堅牢です。

ちなみに

独自ライブラリを公開中

https://github.com/edom18/MathJS

こんな感じで使います

var target = document.getElementById(‘test2'); !var rMatrix = mat4.rotate(mat4(), 90, vec3(0, 0, 1)); var tMatrix = mat4.translate(mat4(), vec3(200, 0, 0)); var resultMatrix = mat4.multiply(rMatrix, tMatrix); target.style.transform = mat4.toCSSMatrixString(resultMatrix);

Demo

ご静聴ありがとうございました