transformed-preserve-3d-1.html (1054B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms API Test: transform preserve-3d</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-preserve-3d-1-ref.html"> 8 <meta name="assert" content="The transformed div should establishe a 3D rendering context"> 9 <style> 10 div { 11 height: 150px; 12 width: 150px; 13 } 14 .container { 15 background-color: red; 16 } 17 .transformed { 18 height: 300px; 19 position: relative; 20 top: -150px; 21 transform-origin: bottom left; 22 transform-style: preserve-3d; 23 transform: rotateX(60deg); 24 background-color: green; 25 } 26 .child { 27 transform-origin: top left; 28 transform: rotateX(30deg); 29 background-color: red; 30 } 31 </style> 32 </head> 33 34 <body> 35 <p>You should only see a GREEN box if this test passes!</p> 36 <div class="container"> 37 <div class="transformed"> 38 <div class='child'> 39 </div> 40 </div> 41 </div> 42 </body> 43 </html>