Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

6,835 views

Published on

Published in: Technology
  • My personal experience with research paper writing services was highly positive. I sent a request to ⇒ www.WritePaper.info ⇐ and found a writer within a few minutes. Because I had to move house and I literally didn’t have any time to sit on a computer for many hours every evening. Thankfully, the writer I chose followed my instructions to the letter. I know we can all write essays ourselves. For those in the same situation I was in, I recommend ⇒ www.WritePaper.info ⇐.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! I can recommend a site that has helped me. It's called ⇒ www.HelpWriting.net ⇐ They helped me for writing my quality research paper.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • What if you had a printing press that could spit out hundred dollar bills on demand? Do you think that would change your life? ♣♣♣ http://t.cn/AisJWzdm
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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 />

×