css3-transform-scale.html (1328B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Transforms Test: transform property with scale function</title> 5 <link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" /> 6 <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com" /> <!-- 2013-09-04 --> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" /> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale" /> 9 <link rel="match" href="reference/css3-transform-scale-ref.html" /> 10 <meta name="assert" content="box width and height will be twice larger if transform scale(2) applied"> 11 <style type="text/css"> 12 .red, 13 .green{ 14 width: 100px; 15 height: 100px; 16 background-color: green; 17 position: absolute; 18 top: 150px; 19 left: 150px; 20 z-index: 10; 21 } 22 .red{ 23 background-color: red; 24 width: 200px; 25 height: 200px; 26 left: 100px; 27 top: 100px; 28 z-index:9; 29 } 30 .green{ 31 transform:scale(2); 32 } 33 </style> 34 </head> 35 <body> 36 <p>The test passes if there is a green square and no red.</p> 37 <div class="red"></div> 38 <div class="green"></div> 39 </body> 40 </html>