transform-origin-006.html (1243B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): transform-origin percentages 4</title> 5 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> 7 <meta name="assert" content='Percentages in transform-origin refer to the 8 size of the element's border box. This tests that they don't 9 refer to the content, padding, or margin box by applying nonzero margin, 10 border, and padding. (Note: an implementation that resolves percentages 11 relative to the incorrect box might fail this test by only a few pixels, so 12 it's important to check that the test and reference renderings match 13 exactly.)'> 14 <link rel="match" href="transform-origin-ref-2.html"> 15 <style> 16 body > div { 17 width: 190px; 18 height: 90px; 19 padding: 5px; 20 border: 1px solid black; 21 margin: 5px; 22 transform: rotate(45deg); 23 transform-origin: 50% 50%; 24 position: relative; 25 right: 5px; 26 } 27 body > div > div { 28 margin: -5px; 29 } 30 </style> 31 </head> 32 <body> 33 <div> 34 <div>Some text!</div> 35 </div> 36 </body> 37 </html>