perspective-origin-xy.html (1556B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: perspective property</title> 5 <link rel="author" title="Francisca Gil" href="mailto:pancha0.0@gmail.com"> 6 <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 9 <link rel="match" href="reference/perspective-reftest.html"> 10 <meta name="assert" content="Asserts that origin '<x,y>' visually moves the objects '<-x,-y>*d/(d-1)' "> 11 <style type="text/css"> 12 .container { 13 position: absolute; 14 width: 150px; 15 height: 150px; 16 top: 100px; 17 left: 100px; 18 perspective: 3px; 19 perspective-origin: 0px 0px; 20 } 21 .redSquare { 22 position: absolute; 23 top: 0px; 24 left: 0px; 25 width: 150px; 26 height: 150px; 27 background: red; 28 transform: translateZ(0px); 29 } 30 .greenSquare { 31 position: absolute; 32 top: 0px; 33 left: 0px; 34 width: 100px; 35 height: 100px; 36 background: green; 37 transform: translateZ(1px); 38 } 39 </style> 40 </head> 41 <body> 42 <p>The test passes if there is a green square and no red.</p> 43 <div class="container"> 44 <div class="redSquare"></div> 45 <div class="greenSquare"></div> 46 </div> 47 </body> 48 </html>