transformed-rotateX-3.html (895B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms API Test: transform rotateX</title> 5 <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="match" href="reference/transformed-rotateX-3-ref.html"> 8 <meta name="assert" content="The transformed div should rotateX by 180 degrees"> 9 <style> 10 div { 11 height: 150px; 12 width: 150px; 13 } 14 .container { 15 background-color: red; 16 } 17 .transformed { 18 transform-origin: top left; 19 transform: rotateX(180deg); 20 background-color: green; 21 position: relative; 22 top: 150px; 23 } 24 </style> 25 </head> 26 27 <body> 28 <p>You should only see a GREEN box if this test passes!</p> 29 <div class="container"> 30 <div class="transformed"> 31 </div> 32 </div> 33 </body> 34 </html>