perspective-origin-x.html (1646B)
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-2/#perspective-property"> 9 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 10 <link rel="match" href="reference/perspective-origin-reftest.html"> 11 <meta name="assert" content="Asserts that origin 'x1' visually moves the objects '-x1*d/(d-1)' "> 12 <style type="text/css"> 13 .container { 14 position: absolute; 15 width: 150px; 16 height: 150px; 17 top: 100px; 18 left: 100px; 19 perspective: 3px; 20 perspective-origin: 0px 50%; 21 } 22 .redSquare { 23 position: absolute; 24 top: 0px; 25 left: 0px; 26 width: 150px; 27 height: 150px; 28 background: red; 29 transform: translateZ(0px); 30 } 31 .greenSquare { 32 position: absolute; 33 top: 25px; 34 left: 0px; 35 width: 100px; 36 height: 100px; 37 background: green; 38 transform: translateZ(1px); 39 } 40 </style> 41 </head> 42 <body> 43 <p>The test passes if there is a green square and no red.</p> 44 <div class="container"> 45 <div class="redSquare"></div> 46 <div class="greenSquare"></div> 47 </div> 48 </body> 49 </html>