Tweet
Tweet

Slide 1

Slide 1 text

Matrix Transforms by Marc Grabanski

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What is a matrix?

Slide 5

Slide 5 text

[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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

What is a transform?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

x y axis rotate -> translate axis moves

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

x y axis

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

[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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

http://famo.us/

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

http://ahrengot.com/tutorials/greensock- javascript-animation/ More on GreenSock

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Thanks!

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Questions?