CSSのmatrix3dについてのお話。

1. 使ってますか？
CSS matrix3d

2. 比留間 和也
HTMLファイ部／人事部
https://twitter.com/edo_m18 http://qiita.com/edo_m18

3. matrix3dは
使ってますか？

4. matrix3dのイメージ

5. • 引数多い
• 行列とか聞きなれない
• 適当に値入れても想像通り動かない

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

8. ((((；ﾟДﾟ))))

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

10. • rotate() / rotate3d()
• translate() / translate3d()
• scale() / scale3d()
Demo

11. ゲームも作れる

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

13. でも・・・

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

15. 2回回転を適用

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

17. 延々と増えていく…

18. (ﾟ ﾟ)!!

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

20. BUT!!

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

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

23. ( ꒪⌓꒪)…

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

25. できます

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

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

28. 平行移動を表す行列

29. 拡大・縮小を表す行列

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

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

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

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

34. | 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 |

35. つまり

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

37. ktkr(ﾟ ﾟ)!!

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

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

40. 行列関連のライブラリ
• ewgl-matrices
WebGL 用の超高速行列ライブラリ
• glMatrix
高性能WebGLアプリ製作の為の、行列とベクトルのJavaScriptライブラリ
• mjs
WebGL用に最適化されたベクトルと行列の計算を行うJavaScriptライブラリ
• Sylvester
ベクトルや行列を操作する為のオープンソースライブラリ。
WebGL用として最適化されたものではありませんが、非常に堅牢です。

41. ちなみに

42. 独自ライブラリを公開中
https://github.com/edom18/MathJS

43. こんな感じで使います

44. 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

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