transform-origin-004.html (1228B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): transform-origin percentages 2</title> 5 <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> 6 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> 8 <meta name="assert" content='A transform-origin of 101px 50% must result 9 in the same rendering as the default of 50% 50% in this case. The content 10 box is 200x100px, so with a 1px border, the border box is 202x102px. 11 transform-origin is computed relative to the border box. (Note: an 12 implementation that incorrectly computes transform-origin percentages 13 relative to the content box would fail this test by only a few pixels, so 14 care is needed in checking that the test and reference renderings match 15 exactly.)'> 16 <link rel="match" href="transform-origin-ref-2.html"> 17 <style> 18 div { 19 width: 200px; 20 height: 100px; 21 border: 1px solid black; 22 transform: rotate(45deg); 23 transform-origin: 101px 50%; 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 Some text! 30 </div> 31 </body> 32 </html>