perspective-translateZ-0.html (1412B)
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 points on the z=0 plane are unchanged"> 10 <style type="text/css"> 11 .container { 12 position: absolute; 13 width: 150px; 14 height: 150px; 15 top: 100px; 16 left: 100px; 17 perspective: 3px; 18 } 19 .redSquare { 20 position: absolute; 21 top: 0px; 22 left: 0px; 23 width: 150px; 24 height: 150px; 25 background: red; 26 transform: translateZ(0px); 27 } 28 .greenSquare { 29 position: absolute; 30 top: 25px; 31 left: 25px; 32 width: 100px; 33 height: 100px; 34 background: green; 35 transform: translateZ(1px); 36 } 37 </style> 38 </head> 39 <body> 40 <p>The test passes if there is a green square and no red.</p> 41 <div class="container"> 42 <div class="redSquare"></div> 43 <div class="greenSquare"></div> 44 </div> 45 </body> 46 </html>