individual-transform-1.html (2769B)
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 individual transforms work correctly by comparing the rendering result with transform functions of the 'transform' property."/> 10 <link rel="match" href="individual-transform-1-ref.html"> 11 <style> 12 div { 13 position: fixed; 14 width: 100px; 15 height: 100px; 16 transform-origin: 0 0; 17 border-style: solid; 18 border-width: 10px 0px 10px 0px; 19 border-color: lime; 20 } 21 .row_1 { 22 top: 100px; 23 } 24 .scale_1{ 25 left: 100px; 26 width: 50px; 27 height: 100px; 28 /* test 'scale: <number>' */ 29 scale: 2; 30 } 31 .translate_1 { 32 left: 150px; 33 /* test 'translate: <length-percentage>' */ 34 translate: 150px; 35 } 36 .rotate_1 { 37 left: 450px; 38 transform-origin: 50% 50%; 39 /* test 'rotate: <angle>' */ 40 rotate: 90deg; 41 } 42 43 .row_2 { 44 top: 250px; 45 } 46 .scale_2{ 47 left: 100px; 48 width: 50px; 49 height: 50px; 50 /* test 'scale: <number>{2}'' */ 51 scale: 2 2; 52 } 53 .translate_2 { 54 left: 150px; 55 top: 200px; 56 /* test 'translate: <length-percentage><length-percentage>' */ 57 translate: 150px 50px; 58 } 59 .rotate_2 { 60 left: 450px; 61 transform-origin: 50% 50%; 62 /* test 'rotate: axis <angle>'*/ 63 rotate: x 45deg; 64 } 65 .row_3 { 66 transform: perspective(500px); 67 top: 400px; 68 } 69 .scale_3{ 70 left: 100px; 71 width: 50px; 72 height: 50px; 73 /* test 'scale: <number>{3}'' */ 74 scale: 2 2 2; 75 } 76 .translate_3 { 77 left: 150px; 78 /* test 'translate: <length-percentage><length>' */ 79 translate: 150px 10px 10px; 80 } 81 .rotate_3 { 82 left: 450px; 83 transform-origin: 50% 50%; 84 /* test 'rotate: <number>{3}<angle>'*/ 85 rotate: 0 1 0 45deg; 86 } 87 </style> 88 </head> 89 <body> 90 <div class="scale_1 row_1"></div> 91 <div class="translate_1 row_1"></div> 92 <div class="rotate_1 row_1"></div> 93 <div class="scale_2 row_2"></div> 94 <div class="translate_2 row_2"></div> 95 <div class="rotate_2 row_2"></div> 96 <div class="scale_3 row_3"></div> 97 <div class="translate_3 row_3"></div> 98 <div class="rotate_3 row_3"></div> 99 </body> 100 </html>