Matrix Transforms

The magic behind CSS transforms is the matrix. Using linear algebra the matrix transform can tell the coordinates in vector where to go. In this presentation I cover CSS transforms, how they stack, libraries to work with it and the future of animation which I believe is some type of physics engine that provides a sane API on top of using CSS matrix3d to manipulate DOM positioning.

Transcript

1. Matrix Transforms by Marc Grabanski
2. jQuery UI Datepicker MarcGrabanski.com LOTS of UI Dev Who? Marc Grabanski
3. ! ! ! ! ! Publisher of: UI/UX Development Consultant http://FrontendMasters.com
4. What is a matrix?
5. [1, 0, 0,
   0, 1, 0,
   0, 0, 1] http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the- mathematically-challenged/ 2D matrix
7. [#, #, #,
   #, #, #,
   #, #, #]
8. What is a transform?
9. rotate(45) scale(1.25) A sane API on top of matrix
10. translate(x, y)
    rotate(angle)
    scale(x, y)
    skew(angle, angle)
11. Demo: Stacking Transforms http://codepen.io/1Marc/pen/DCvFm
12. x y axis rotate -> translate axis moves
13. Demo: Absolute/Relative Transforms in Raphael http://codepen.io/1Marc/pen/rsmbF
14. x y axis
15. http://codepen.io/1Marc/pen/zqJba Demo: Animating Transforms in Raphael
16. http://codepen.io/1Marc/pen/FJbtj Demo: Transitioning CSS Matrix
17. http://codepen.io/1Marc/pen/BdAvt Demo: Transitioning with XCSSMatrix
18. [1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1] http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html 3D matrix
19. The Future? http://www.eleqtriq.com/2010/11/natural-object- rotation-with-css3-3d/ matrix3d Demo
20. ! Physics + 3D Matrix + Request Animation Frame The Future
21. http://famo.us/
22. http://www.youtube.com/watch?v=NdAvOE3SyrU Famo.us Engine
23. http://ahrengot.com/playground/tweenmax- examples/3d-flip/ Greensock 3D
24. http://codepen.io/A973C/pen/gnHrJ Greensock 3D
25. http://ahrengot.com/tutorials/greensock- javascript-animation/ More on GreenSock
26. http://sylvester.jcoglan.com/ http://xy-kao.com/sandbox/3d-matrix-math-for-css- using-sylvester/ Sylvester - Matrix Math in JS
27. More Resources http://acko.net/blog/animate-your-way-to-glory/ http://acko.net/files/fullfrontal/fullfrontal/slides-net/
28. Thanks!
29. Twitter: @1marc
    ! I think you’d like
    Frontend Masters =)
30. Questions?