使ってますか? CSS matrix3d

1,339 views

Published on

CSSのmatrix3dについてのお話。

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,339
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
2
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

使ってますか? CSS matrix3d

  1. 1. 使ってますか? CSS matrix3d
  2. 2. 比留間 和也 HTMLファイ部/人事部 https://twitter.com/edo_m18 http://qiita.com/edo_m18
  3. 3. matrix3dは 使ってますか?
  4. 4. matrix3dのイメージ
  5. 5. • 引数多い • 行列とか聞きなれない • 適当に値入れても想像通り動かない
  6. 6. 30 回転させただけで 数値がたくさん
  7. 7. ((((;゚Д゚))))
  8. 8. でもtransform-functionを使えば 手軽に3Dの効果が得られる
  9. 9. • rotate() / rotate3d() • translate() / translate3d() • scale() / scale3d() Demo
  10. 10. ゲームも作れる
  11. 11. CSS3Dで実現したルービック・キューブ
  12. 12. でも・・・
  13. 13. ユーザの操作を逐一適 用していくと・・
  14. 14. 2回回転を適用
  15. 15. 24回適用・・・((((;゚Д゚))))
  16. 16. 延々と増えていく…
  17. 17. (゚ ゚)!!
  18. 18. 回転自体をまとめちゃえ ばいいんじゃね?(゚ ゚)
  19. 19. BUT!!
  20. 20. 適用する順番が違うと 結果が異なる
  21. 21. http://jsdo.it/edo_m18/1EGy
  22. 22. ( ꒪⌓꒪)…
  23. 23. なんとかひとつにまと められないかな・・・
  24. 24. できます
  25. 25. そう、行列ならね (振り出しに戻る)
  26. 26. 行列には回転や平行移動 を表す決まった形がある
  27. 27. 平行移動を表す行列
  28. 28. 拡大・縮小を表す行列
  29. 29. X軸に対する回転を表す行列
  30. 30. Y軸に対する回転を表す行列
  31. 31. Z軸に対する回転を表す行列
  32. 32. 行列を掛け算すると ひとつの行列になる
  33. 33. | 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 |
  34. 34. つまり
  35. 35. ひとつの行列で 複数の結果を表すことができる
  36. 36. ktkr(゚ ゚)!!
  37. 37. ただ、行列の計算は 結構めんどう
  38. 38. 行列の計算はライブラリに 任せちゃいましょう
  39. 39. 行列関連のライブラリ • ewgl-matrices
 WebGL 用の超高速行列ライブラリ • glMatrix
 高性能WebGLアプリ製作の為の、行列とベクトルのJavaScriptライブラリ • mjs
 WebGL用に最適化されたベクトルと行列の計算を行うJavaScriptライブラリ • Sylvester
 ベクトルや行列を操作する為のオープンソースライブラリ。
 WebGL用として最適化されたものではありませんが、非常に堅牢です。
  40. 40. ちなみに
  41. 41. 独自ライブラリを公開中 https://github.com/edom18/MathJS
  42. 42. こんな感じで使います
  43. 43. 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
  44. 44. ご静聴ありがとうございました

×