css3-transform-rotateY.html (1038B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Transforms Test: transform property with rotateY function</title> 5 <link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" /> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" /> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotate" /> 8 <link rel="match" href="css3-transform-rotateY-ref.html"/> 9 <meta name="assert" content="box width should be equal to projection width if transform rotateY applied"> 10 <style type="text/css"> 11 div { 12 height: 100px; 13 position: absolute; 14 top: 80px; 15 } 16 .red { 17 background-color: red; 18 left: 80px; 19 width: 100px; 20 } 21 .green{ 22 background-color: green; 23 left: 30px; 24 transform: rotateY(60deg); 25 width: 200px; 26 } 27 </style> 28 </head> 29 <body> 30 <p>The test passes if there is a green square and no red.</p> 31 <div class="red"></div> 32 <div class="green"></div> 33 </body> 34 </html>