1. CSS3 Transforms / Transitions / WebGL KSWLee 1

2. CSS Level 3 Modules Status Both 2D/3D transforms and Transition modules are all still working drafts http://www.w3.org/Style/CSS/current-work 2

3. 3 CSS 2D Transform

4. 2D transform functions 4

5. Browser Compatibility 5

6. CSS 2D Transform Module Level 3 transform-origin transform div {transform-origin: 50% 50%; transform: scale(2) translate(10px, 10px); -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2) translate(10px, 10px); } 6

7. 2D transform-origin Scale by 2x and move (1, 0.5) 7

8. 2D transform-origin move (1, 0.5) and Scale by 2x 8

9. 2D transform-origin -ms-transform-origin -moz-transform-origin -webkit-transform-origin -webkit-transform-origin -o-transfomr-origin Default: 50% 50% (Center of the element box) Could be: [x% y%] [xpx, ypx] [ left | center | right ] || [ top | center | bottom ] 9

10. 2D transform functions matrix(<number>, <number>, <number>, <number>, <number>, <number>) translate(<translation-value>[, <translation-value>]) translateX(<translation-value>) translateY(<translation-value>) scale(<number>[, <number>]) scaleX(<number>) scaleY(<number>) rotate(<angle>) skewX(<angle>) skewY(<angle>) skew(<angle> [, <angle>]) 10

11. 2D transform functions – transform group <div style="transform:translate(-10px,-20px)scale(2) rotate(45deg) translate(5px,10px)"/> <div style="transform:translate(-10px,-20px)"> <div style="transform:scale(2)"> <div style="transform:rotate(45deg)"> <div style="transform:translate(5px,10px)"></div> </div> </div> </div> 11

12. 2D transform matrix A CSS tool website: http://css3.mikeplate.com/ 12 http://www.useragentman.com/matrix/

13. Online Applications http://www.m4html.com/58-Amazing-CSS3-Image-Galleries-Sliders-Animations/ 13

14. Pure CSS3 Page Flip Effect 14 http://www.romancortes.com/ficheros/page-flip.html http://www.romancortes.com/ficheros/page-flip.html

15. 15 What does scale(-1) / scale(1, -1) / scale(-1, 1) mean?

16. 16 CSS 3D Transform

17. Browser Compatibility 17

19. perspective-origin

20. transform-style

21. backface-visibility

22. transform

23. transform-origin18

24. Perspective / Perspective-Origin perspective perspective-origin http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html 19

26. perspective-origin

27. transform-style

28. backface-visibility

29. transform

30. transform-origin20

31. transform-style <div id=‘purple’> <div id=‘green’> </div> <div id=‘yellow’></div> </div> transform-style:preserve-3d; transform-style:flat; http://www.webkit.org/blog-files/3d-transforms/transform-style.html 21

32. backface-visibility Backgace-visibility:hidden; Backgace-visibility:visible; 22

33. 3D transform functions matrix(<number>, <number>, <number>, <number>, <number>, <number>) matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>) translate(<translation-value>[, <translation-value>]) translate3d(<translation-value>, <translation-value>, <translation-value>) translateX(<translation-value>) translateY(<translation-value>) translateZ(<translation-value>) scale(<number>[, <number>]) scale3d(<number>, <number>, <number>) scaleX(<number>) scaleY(<number>) scaleZ(<number>) rotate(<angle>) rotate3d(<number>, <number>, <number>, <angle>) rotateX(<angle>) rotateY(<angle>) rotateZ(<angle>) skewX(<angle>) skewY(<angle>) skew(<angle> [, <angle>]) perspective(<number>) 23

34. matrix3d Rotate about X axis matrix3d(00, 01, 02, 03, 10, 11, 12, 13, 20, 21, 22, 23, 30, 31, 32, 33) Translation matrix Rotate about Z axis matrix3d Scale matrix Rotate about Y axis 03 = 0, 13 = 0, 23 = 0, 33 = 1 24

35. 25 What does translate3d(0, 0, 0) do?

36. 3D Transform Cube Sample Front:translateZ(100) Back: translateZ(100) rotateZ(-180deg) Right:translateZ(100) rotateY(90deg) Left:translateZ(100) rotateY(-90deg) Top:translateZ(100) rotateX(90deg) Bottom:translateZ(100) rotateX(-90deg) http://desandro.github.com/3dtransforms/examples/cube-01-steps.html 26

37. Carousel Sample http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html 27

38. Webkit Blog Sample http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html 28

39. 3D Transform Application http://www.satine.org/research/webkit/snowleopard/snowstack.html 29

40. 30 CSS Transition

41. Browser Compatibility 31

42. CSSTransition Module Level 3 32 Transition on left/background with in 1sec

43. Transition Property transition-property CSS property list, e.g. left top background transform transition-duration 5s | 5000ms transition-timing-function transition-delay 33

44. transition-timing-function http://www.the-art-of-web.com/css/timing-function/ 34

45. Auto Reversing Transition 35 Interrupt here. E.g. :hover pseudo element

46. Transition Events 36 transitionend

47. Sencha Animator 37

48. WebGL WebGL Spec v1.0 released in Mar, 2011 Not even a w3c working draft for now Rely on HTML5 canvas Security issue found in May, 2011 for denial of service and cross-domain attacking issues Chrome 12 natively supports WebGL FireFox 4.0 requires manual steps to enable 38

49. Graphics Pipeline 39

50. 2D Example 40

51. 41

52. The end 42