css-transform-scale-001-manual.html (1998B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: transform property with scale function on hover state</title> 5 <link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> 8 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-functions"> 9 <!-- See also: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:hover --> 10 <link rel="match" href="reference/css-transform-scale-ref-001.html"> 11 <meta name="assert" content="When the element is hovered over, the transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner."> 12 <style type="text/css"> 13 .container { 14 position: absolute; 15 } 16 .greenSquare { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 } 24 .greenSquare:hover { 25 transform-origin: 0 0; 26 transform: scale(2); 27 } 28 29 /* This div should only be visible if the test fails */ 30 .redSquare { 31 position: absolute; 32 /* It is approximately the same size as the test div, but with a 1px margin */ 33 width: 98px; 34 height: 98px; 35 background-color: red; 36 left: 100px; 37 top :100px; 38 } 39 </style> 40 </head> 41 <body> 42 <p>The test passes if you hover over the green square and it completely covers the red square.</p> 43 <div class="container"> 44 <!-- This is the square that should not be visible if the test passes --> 45 <div class="redSquare"></div> 46 <!-- This is the square being tested with the transform --> 47 <div class="greenSquare"></div> 48 </div> 49 </body> 50 </html>