transformations-ref.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html>
  3. <link rel='stylesheet' type='text/css' href='style.css'>
  4. <style>
  5. body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
  6. body > div:nth-child(2) { -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); }
  7. body > div:nth-child(3) { -moz-transform: rotate(30deg); }
  8. body > div:nth-child(4) { -moz-transform: scale(2, 4); }
  9. body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
  10. body > div:nth-child(6) { -moz-transform: scale(1, 0.4); }
  11. body > div:nth-child(7) { -moz-transform: scale(0.1, 1); }
  12. body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
  13. body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
  14. body > div:nth-child(10) { -moz-transform: translate(10px, 30px); }
  15. body > div:nth-child(11) { -moz-transform: translate(30px, 10px); }
  16. body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); }
  17. body > div:nth-child(13) { -moz-transform: translate(30px, -10px); }
  18. body > div:nth-child(14) { -moz-transform: scale(0, 0); }
  19. </style>
  20. <body>
  21. <div class="meter-element">
  22. <div class="meter-bar">
  23. </div>
  24. </div>
  25. <div class="meter-element">
  26. <div class="meter-bar">
  27. </div>
  28. </div>
  29. <div class="meter-element">
  30. <div class="meter-bar">
  31. </div>
  32. </div>
  33. <div class="meter-element">
  34. <div class="meter-bar">
  35. </div>
  36. </div>
  37. <div class="meter-element">
  38. <div class="meter-bar">
  39. </div>
  40. </div>
  41. <div class="meter-element">
  42. <div class="meter-bar">
  43. </div>
  44. </div>
  45. <div class="meter-element">
  46. <div class="meter-bar">
  47. </div>
  48. </div>
  49. <div class="meter-element">
  50. <div class="meter-bar">
  51. </div>
  52. </div>
  53. <div class="meter-element">
  54. <div class="meter-bar">
  55. </div>
  56. </div>
  57. <div class="meter-element">
  58. <div class="meter-bar">
  59. </div>
  60. </div>
  61. <div class="meter-element">
  62. <div class="meter-bar">
  63. </div>
  64. </div>
  65. <div class="meter-element">
  66. <div class="meter-bar">
  67. </div>
  68. </div>
  69. <div class="meter-element">
  70. <div class="meter-bar">
  71. </div>
  72. </div>
  73. <div class="meter-element">
  74. <div class="meter-bar">
  75. </div>
  76. </div>
  77. </body>
  78. </html>