transform-3d-rotateY-stair-above-001.xht (1528B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: rotateY with perspective produces a trapezoid</title> 5 <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/> 7 <link rel="match" href="reference/transform-3d-rotateY-stair-above-ref-001.xht"/> 8 <meta name="assert" content="A rotateY transform with perspective 9 should result in a trapezoid."/> 10 <style type="text/css"><![CDATA[ 11 div { 12 height: 150px; 13 width: 150px; 14 } 15 .background { 16 background-color: green; 17 height: 200px; 18 width: 200px; 19 } 20 .container { 21 position: absolute; 22 top: 20px; 23 left: 0; 24 perspective: 500px; 25 } 26 .transformed { 27 background-color: red; 28 transform: rotateY(50deg); 29 } 30 .stair { 31 background-color: green; 32 position: absolute; 33 } 34 #one { 35 width: 33px; 36 height: 170px; 37 top: 10px; 38 left: 20px; 39 } 40 #two { 41 width: 33px; 42 height: 158px; 43 top: 16px; 44 left: 53px; 45 } 46 #three { 47 width: 33px; 48 height: 148px; 49 top: 21px; 50 left: 86px; 51 } 52 .stairs { 53 height: 180px; 54 } 55 ]]></style> 56 </head> 57 <body> 58 <div class="background"> 59 <div class="container"> 60 <div class="transformed"></div> 61 </div> 62 <div class="stairs"> 63 <div id="one" class="stair"></div> 64 <div id="two" class="stair"></div> 65 <div id="three" class="stair"></div> 66 </div> 67 </div> 68 <p>You should see a green box. There should be no red.</p> 69 </body> 70 </html>