individual-transform-1-ref.html (2406B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Individual transform: compare individual transform with transform functions</title> 6 <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> 9 <meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/> 10 <style> 11 div { 12 position: fixed; 13 width: 100px; 14 height: 100px; 15 transform-origin: 0 0; 16 border-style: solid; 17 border-width: 10px 0px 10px 0px; 18 border-color: lime; 19 } 20 .row_1 { 21 top: 100px; 22 } 23 .scale_1{ 24 left: 100px; 25 width: 50px; 26 height: 100px; 27 transform: scale(2, 2); 28 } 29 .translate_1 { 30 left: 150px; 31 transform: translateX(150px); 32 } 33 .rotate_1 { 34 left: 450px; 35 transform-origin: 50% 50%; 36 transform: rotate(90deg); 37 } 38 39 .row_2 { 40 top: 250px; 41 } 42 .scale_2{ 43 left: 100px; 44 width: 50px; 45 height: 50px; 46 transform: scale(2, 2); 47 } 48 .translate_2 { 49 left: 150px; 50 top: 200px; 51 transform: translate(150px, 50px); 52 } 53 .rotate_2 { 54 left: 450px; 55 transform-origin: 50% 50%; 56 transform: rotate3d(1, 0, 0, 45deg); 57 } 58 .row_3 { 59 transform: perspective(500px); 60 top: 400px; 61 } 62 .scale_3{ 63 left: 100px; 64 width: 50px; 65 height: 50px; 66 transform: scale3d(2, 2, 2); 67 } 68 .translate_3 { 69 left: 150px; 70 transform: translate3d(150px, 10px, 10px); 71 } 72 .rotate_3 { 73 left: 450px; 74 transform-origin: 50% 50%; 75 transform: rotate3d(0, 1, 0, 45deg); 76 } 77 </style> 78 </head> 79 <body> 80 <div class="scale_1 row_1"></div> 81 <div class="translate_1 row_1"></div> 82 <div class="rotate_1 row_1"></div> 83 <div class="scale_2 row_2"></div> 84 <div class="translate_2 row_2"></div> 85 <div class="rotate_2 row_2"></div> 86 <div class="scale_3 row_3"></div> 87 <div class="translate_3 row_3"></div> 88 <div class="rotate_3 row_3"></div> 89 </body> 90 </html>