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.

1. Matrix Transforms
by Marc Grabanski

2. Who?
Marc Grabanski
jQuery UI Datepicker
MarcGrabanski.com
LOTS of UI Dev

3. !
!
!
UI/UX Development Consultant
!
!
Publisher of:
http://FrontendMasters.com

4. What is a matrix?

5. 2D matrix
[1, 0, 0,
0, 1, 0,
0, 0, 1]
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-themathematically-challenged/

7. [#, #, #,
#, #, #,
#, #, #]

8. What is a transform?

9. A sane API on top of matrix
rotate(45) scale(1.25)

10. translate(x, y)
rotate(angle)
scale(x, y)
skew(angle, angle)

11. Demo: Stacking Transforms
http://codepen.io/1Marc/pen/DCvFm

12. rotate -> translate
axis moves
axis
x
y

13. Demo: Absolute/Relative
Transforms in Raphael
http://codepen.io/1Marc/pen/rsmbF

14. axis
x
y

15. Demo: Animating
Transforms in Raphael
http://codepen.io/1Marc/pen/zqJba

16. Demo: Transitioning CSS Matrix
http://codepen.io/1Marc/pen/FJbtj

17. Demo: Transitioning
with XCSSMatrix
http://codepen.io/1Marc/pen/BdAvt

18. 3D matrix
[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

19. matrix3d Demo
The Future?
http://www.eleqtriq.com/2010/11/natural-objectrotation-with-css3-3d/

20. The Future
!
Physics + 3D Matrix +
Request Animation Frame

21. http://famo.us/

22. Famo.us Engine
http://www.youtube.com/watch?v=NdAvOE3SyrU

23. Greensock 3D
http://ahrengot.com/playground/tweenmaxexamples/3d-flip/

24. Greensock 3D
http://codepen.io/A973C/pen/gnHrJ

25. More on GreenSock
http://ahrengot.com/tutorials/greensockjavascript-animation/

26. Sylvester - Matrix Math in JS
http://sylvester.jcoglan.com/
http://xy-kao.com/sandbox/3d-matrix-math-for-cssusing-sylvester/

27. More Resources
http://acko.net/files/fullfrontal/fullfrontal/slides-net/
http://acko.net/blog/animate-your-way-to-glory/

28. Thanks!

29. Twitter: @1marc
!
I think you’d like
Frontend Masters =)

30. Questions?