transform-origin-01.html (1516B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: SVG Transform using transform-origin</title> 5 <link rel="author" title="CJ Gammon" href="mailto:gammon@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> 7 <link rel="match" href="reference/transform-origin-01-ref.html"> 8 <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'"> 9 <style type="text/css"> 10 #container{ 11 position: relative; 12 } 13 14 .square{ 15 position: absolute; 16 } 17 18 #blue{ 19 top: 50px; 20 left: 50px; 21 width: 100px; 22 height: 100px; 23 background: blue; 24 } 25 26 #red{ 27 top: 0px; 28 left: 100px; 29 width: 100px; 30 height: 100px; 31 background: red; 32 transform-origin: left center; 33 transform: rotate(90deg); 34 } 35 36 #green{ 37 top: 0px; 38 left: 100px; 39 width: 100px; 40 height: 100px; 41 background: green; 42 transform-origin: left; 43 transform: rotate(90deg); 44 } 45 46 </style> 47 </head> 48 <body> 49 <p>The test passes if there is a green square and no red or blue square.</p> 50 <div id="container"> 51 <div id="blue" class="square"></div> 52 <div id="red" class="square"></div> 53 <div id="green" class="square"></div> 54 </div> 55 </body> 56 </html>