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