perspective-translateZ-positive.html (1199B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: perspective property</title> 5 <link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 8 <link rel="match" href="reference/perspective-reftest.html"> 9 <meta name="assert" content="Asserts that the scaling is proportional to d/(d - Z) for a positive Z"> 10 <style type="text/css"> 11 .redContainer { 12 position: absolute; 13 width: 150px; 14 height: 150px; 15 top: 100px; 16 left: 100px; 17 perspective: 3px; 18 background: red; 19 } 20 .greenSquare { 21 position: absolute; 22 top: 25px; 23 left: 25px; 24 width: 100px; 25 height: 100px; 26 background: green; 27 transform: translateZ(1px); 28 } 29 </style> 30 </head> 31 <body> 32 <p>The test passes if there is a green square and no red.</p> 33 <div class="redContainer"> 34 <div class="greenSquare"></div> 35 </div> 36 </body> 37 </html>