CSS3 Transforms / Transitions / WebGL<br />KSWLee<br />1<br />
CSS Level 3 Modules Status<br />Both 2D/3D transforms and Transition modules are all still working drafts<br />http://www....
3<br />CSS 2D Transform<br />
2D transform functions<br />4<br />
Browser Compatibility<br />5<br />
CSS 2D Transform Module Level 3<br />transform-origin <br />transform <br />div <br />{transform-origin: 50% 50%;     tran...
2D transform-origin<br />Scale by 2x and move (1, 0.5)<br />7<br />
2D transform-origin<br />move (1, 0.5) and Scale by 2x <br />8<br />
2D transform-origin<br />-ms-transform-origin        -moz-transform-origin     -webkit-transform-origin   -webkit-transfor...
2D transform functions<br />matrix(<number>, <number>, <number>, <number>, <number>, <number>)<br />translate(<translation...
2D transform functions – transform group<br /><div style="transform:translate(-10px,-20px)scale(2) rotate(45deg) translate...
2D transform matrix<br />A CSS tool website: http://css3.mikeplate.com/<br />12<br />http://www.useragentman.com/matrix/<b...
Online Applications<br />http://www.m4html.com/58-Amazing-CSS3-Image-Galleries-Sliders-Animations/<br />13<br />
Pure CSS3 Page Flip Effect<br />14<br />http://www.romancortes.com/ficheros/page-flip.html<br />http://www.romancortes.com...
15<br />What does scale(-1) / scale(1, -1) / scale(-1, 1) mean?<br />
16<br />CSS 3D Transform<br />
Browser Compatibility<br />17<br />
CSS 3D Transform Module Level 3<br /><ul><li>perspective
perspective-origin
transform-style
backface-visibility
transform
transform-origin</li></ul>18<br />
Perspective / Perspective-Origin<br />perspective<br />perspective-origin<br />http://www.webkit.org/blog-files/3d-transfo...
CSS 3D Transform Module Level 3<br /><ul><li>perspective
perspective-origin
transform-style
backface-visibility
transform
transform-origin</li></ul>20<br />
transform-style<br /><div id=‘purple’><br />    <div id=‘green’><br />    </div> <br /><div id=‘yellow’></div><br /></div>...
backface-visibility<br />Backgace-visibility:hidden;<br />Backgace-visibility:visible;<br />22<br />
3D transform functions<br />matrix(<number>, <number>, <number>, <number>, <number>, <number>)<br />matrix3d(<number>, <nu...
matrix3d<br />Rotate about X axis<br />matrix3d(00, 01, 02, 03, <br />10, 11, 12, 13,<br />	20, 21, 22, 23,<br />30, 31, 3...
25<br />What does translate3d(0, 0, 0) do?<br />
3D Transform Cube Sample<br />Front:translateZ(100)<br />Back: translateZ(100) rotateZ(-180deg)<br />Right:translateZ(100)...
Carousel Sample<br />http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html<br />27<br />
Webkit Blog Sample<br />http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html<br />28<br />
3D Transform Application<br />http://www.satine.org/research/webkit/snowleopard/snowstack.html<br />29<br />
30<br />CSS Transition<br />
Browser Compatibility<br />31<br />
CSSTransition Module Level 3<br />32<br />Transition on left/background with in 1sec<br />
Upcoming SlideShare
Loading in …5
×

CSS3 2D/3D transform

5,996 views

Published on

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
5,996
On SlideShare
0
From Embeds
0
Number of Embeds
171
Actions
Shares
0
Downloads
135
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

CSS3 2D/3D transform

  1. 1. CSS3 Transforms / Transitions / WebGL<br />KSWLee<br />1<br />
  2. 2. CSS Level 3 Modules Status<br />Both 2D/3D transforms and Transition modules are all still working drafts<br />http://www.w3.org/Style/CSS/current-work<br />2<br />
  3. 3. 3<br />CSS 2D Transform<br />
  4. 4. 2D transform functions<br />4<br />
  5. 5. Browser Compatibility<br />5<br />
  6. 6. CSS 2D Transform Module Level 3<br />transform-origin <br />transform <br />div <br />{transform-origin: 50% 50%; transform: scale(2) translate(10px, 10px); -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2) translate(10px, 10px);<br />}<br />6<br />
  7. 7. 2D transform-origin<br />Scale by 2x and move (1, 0.5)<br />7<br />
  8. 8. 2D transform-origin<br />move (1, 0.5) and Scale by 2x <br />8<br />
  9. 9. 2D transform-origin<br />-ms-transform-origin -moz-transform-origin -webkit-transform-origin -webkit-transform-origin -o-transfomr-origin<br />Default: 50% 50% (Center of the element box)<br />Could be: <br />[x% y%] [xpx, ypx] <br />[ left | center | right ] || [ top | center | bottom ]<br />9<br />
  10. 10. 2D transform functions<br />matrix(<number>, <number>, <number>, <number>, <number>, <number>)<br />translate(<translation-value>[, <translation-value>])<br />translateX(<translation-value>)<br />translateY(<translation-value>)<br />scale(<number>[, <number>])<br />scaleX(<number>)<br />scaleY(<number>)<br />rotate(<angle>)<br />skewX(<angle>)<br />skewY(<angle>)<br />skew(<angle> [, <angle>])<br />10<br />
  11. 11. 2D transform functions – transform group<br /><div style="transform:translate(-10px,-20px)scale(2) rotate(45deg) translate(5px,10px)"/><br /><div style="transform:translate(-10px,-20px)"><br /><div style="transform:scale(2)"><br /><div style="transform:rotate(45deg)"><br /><div style="transform:translate(5px,10px)"></div><br /></div><br /></div><br /></div><br />11<br />
  12. 12. 2D transform matrix<br />A CSS tool website: http://css3.mikeplate.com/<br />12<br />http://www.useragentman.com/matrix/<br />
  13. 13. Online Applications<br />http://www.m4html.com/58-Amazing-CSS3-Image-Galleries-Sliders-Animations/<br />13<br />
  14. 14. Pure CSS3 Page Flip Effect<br />14<br />http://www.romancortes.com/ficheros/page-flip.html<br />http://www.romancortes.com/ficheros/page-flip.html<br />
  15. 15. 15<br />What does scale(-1) / scale(1, -1) / scale(-1, 1) mean?<br />
  16. 16. 16<br />CSS 3D Transform<br />
  17. 17. Browser Compatibility<br />17<br />
  18. 18. CSS 3D Transform Module Level 3<br /><ul><li>perspective
  19. 19. perspective-origin
  20. 20. transform-style
  21. 21. backface-visibility
  22. 22. transform
  23. 23. transform-origin</li></ul>18<br />
  24. 24. Perspective / Perspective-Origin<br />perspective<br />perspective-origin<br />http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html<br />19<br />
  25. 25. CSS 3D Transform Module Level 3<br /><ul><li>perspective
  26. 26. perspective-origin
  27. 27. transform-style
  28. 28. backface-visibility
  29. 29. transform
  30. 30. transform-origin</li></ul>20<br />
  31. 31. transform-style<br /><div id=‘purple’><br /> <div id=‘green’><br /> </div> <br /><div id=‘yellow’></div><br /></div><br />transform-style:preserve-3d;<br />transform-style:flat;<br />http://www.webkit.org/blog-files/3d-transforms/transform-style.html<br />21<br />
  32. 32. backface-visibility<br />Backgace-visibility:hidden;<br />Backgace-visibility:visible;<br />22<br />
  33. 33. 3D transform functions<br />matrix(<number>, <number>, <number>, <number>, <number>, <number>)<br />matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)<br />translate(<translation-value>[, <translation-value>])<br />translate3d(<translation-value>, <translation-value>, <translation-value>)<br />translateX(<translation-value>)<br />translateY(<translation-value>)<br />translateZ(<translation-value>)<br />scale(<number>[, <number>])<br />scale3d(<number>, <number>, <number>)<br />scaleX(<number>)<br />scaleY(<number>)<br />scaleZ(<number>)<br />rotate(<angle>)<br />rotate3d(<number>, <number>, <number>, <angle>)<br />rotateX(<angle>)<br />rotateY(<angle>)<br />rotateZ(<angle>)<br />skewX(<angle>)<br />skewY(<angle>)<br />skew(<angle> [, <angle>])<br />perspective(<number>)<br />23<br />
  34. 34. matrix3d<br />Rotate about X axis<br />matrix3d(00, 01, 02, 03, <br />10, 11, 12, 13,<br /> 20, 21, 22, 23,<br />30, 31, 32, 33)<br />Translation matrix<br />Rotate about Z axis<br />matrix3d<br />Scale matrix<br />Rotate about Y axis<br />03 = 0, 13 = 0, 23 = 0, 33 = 1<br />24<br />
  35. 35. 25<br />What does translate3d(0, 0, 0) do?<br />
  36. 36. 3D Transform Cube Sample<br />Front:translateZ(100)<br />Back: translateZ(100) rotateZ(-180deg)<br />Right:translateZ(100) rotateY(90deg)<br />Left:translateZ(100) rotateY(-90deg)<br />Top:translateZ(100) rotateX(90deg)<br />Bottom:translateZ(100) rotateX(-90deg)<br />http://desandro.github.com/3dtransforms/examples/cube-01-steps.html<br />26<br />
  37. 37. Carousel Sample<br />http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html<br />27<br />
  38. 38. Webkit Blog Sample<br />http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html<br />28<br />
  39. 39. 3D Transform Application<br />http://www.satine.org/research/webkit/snowleopard/snowstack.html<br />29<br />
  40. 40. 30<br />CSS Transition<br />
  41. 41. Browser Compatibility<br />31<br />
  42. 42. CSSTransition Module Level 3<br />32<br />Transition on left/background with in 1sec<br />
  43. 43. Transition Property<br />transition-property <br />CSS property list, e.g. left top background transform<br />transition-duration<br />5s | 5000ms<br />transition-timing-function<br />transition-delay<br />33<br />
  44. 44. transition-timing-function<br />http://www.the-art-of-web.com/css/timing-function/<br />34<br />
  45. 45. Auto Reversing Transition<br />35<br />Interrupt here. E.g. :hover pseudo element<br />
  46. 46. Transition Events<br />36<br />transitionend<br />
  47. 47. Sencha Animator<br />37<br />
  48. 48. WebGL<br />WebGL Spec v1.0 released in Mar, 2011 <br />Not even a w3c working draft for now <br />Rely on HTML5 canvas <br />Security issue found in May, 2011 for denial of service and cross-domain attacking issues<br />Chrome 12 natively supports WebGL<br />FireFox 4.0 requires manual steps to enable <br />38<br />
  49. 49. Graphics Pipeline<br />39<br />
  50. 50. 2D Example<br />40<br />
  51. 51. 41<br />
  52. 52. The end<br />42<br />

×