transform-origin-008.html (1326B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transforms Test: transform-origin - center 0%('center' computes to '50%' in horizontal position)</title> 4 <link rel="author" title="Intel" href="http://www.intel.com"> 5 <link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> 6 <link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> 7 <link rel="match" href="transform-origin-007-ref.html"> 8 <meta name="assert" content="The 'transform-origin' property set 'center' computes to 50%(left 50%) for the horizontal position."> 9 <style> 10 .div1 { 11 height: 150px; 12 position: absolute; 13 width: 150px; 14 } 15 .div2 { 16 background-color: gray; 17 } 18 #test { 19 background-color: red; 20 height: 50px; 21 margin: 100px 50px 0px 50px; 22 transform: rotate(180deg); 23 transform-origin: center 0%; 24 width: 50px; 25 } 26 #ref { 27 background-color: green; 28 height: 50px; 29 margin: 100px 50px 0px 50px; 30 transform: rotate(180deg); 31 transform-origin: 50% 0%; 32 width: 50px; 33 } 34 </style> 35 <body> 36 <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> 37 <div class="div1 div2"><div id="test"></div></div> 38 <div class="div1"><div id="ref"></div></div> 39 </body>