Matrix Transformsby Marc Grabanski

jQuery UI Datepicker

MarcGrabanski.com

LOTS of UI Dev

Who?Marc Grabanski

!

!

!

!

!

Publisher of:

UI/UX Development Consultant

http://FrontendMasters.com

What is a matrix?

[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

[#, #, #, #, #, #, #, #, #]

What is a transform?

rotate(45) scale(1.25)

A sane API on top of matrix

translate(x, y) rotate(angle)

scale(x, y) skew(angle, angle)

Demo: Stacking Transforms

http://codepen.io/1Marc/pen/DCvFm

x

yaxis

rotate -> translate axis moves

Demo: Absolute/Relative Transforms in Raphael

http://codepen.io/1Marc/pen/rsmbF

x

yaxis

http://codepen.io/1Marc/pen/zqJba

Demo: Animating Transforms in Raphael

http://codepen.io/1Marc/pen/FJbtj

Demo: Transitioning CSS Matrix

http://codepen.io/1Marc/pen/BdAvt

Demo: Transitioning with XCSSMatrix

[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

The Future?

http://www.eleqtriq.com/2010/11/natural-object-rotation-with-css3-3d/

matrix3d Demo

!

Physics + 3D Matrix + Request Animation Frame

The Future

http://famo.us/

http://www.youtube.com/watch?v=NdAvOE3SyrU

Famo.us Engine

http://ahrengot.com/playground/tweenmax-examples/3d-flip/

Greensock 3D

http://codepen.io/A973C/pen/gnHrJ

Greensock 3D

http://ahrengot.com/tutorials/greensock-javascript-animation/

More on GreenSock

http://sylvester.jcoglan.com/

http://xy-kao.com/sandbox/3d-matrix-math-for-css-using-sylvester/

Sylvester - Matrix Math in JS

More Resources

http://acko.net/blog/animate-your-way-to-glory/

http://acko.net/files/fullfrontal/fullfrontal/slides-net/

Thanks!

Twitter: @1marc !

I think you’d like Frontend Masters =)

Questions?