css-rotate-2d-3d-001.html (1322B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: 2D rotation with 3D rotation</title> 5 <link rel="author" title="Philip Rogers" href="mailto:pdr@google.com"> 6 <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com" /> <!-- 2012-06-16 --> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#two-d-transform-functions"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> 9 <link rel="match" href="css-rotate-2d-3d-001-ref.html"> 10 <meta name="assert" content="This transform rotates a tall rectangle by 90 degrees then applies a 3D rotation in the X axis."> 11 <style type="text/css"> 12 .greenSquare { 13 position: absolute; 14 top: 50px; 15 left: 100px; 16 width: 100px; 17 height: 200px; 18 background: green; 19 transform: rotate(90deg) rotate3d(1, 0, 0, 60deg); 20 } 21 .redSquare { 22 position: absolute; 23 top: 101px; 24 left: 101px; 25 width: 98px; 26 height: 98px; 27 background: red; 28 } 29 </style> 30 </head> 31 <body> 32 <p>The test passes if there is a green square and no red.</p> 33 <div class="redSquare"></div> 34 <div class="greenSquare"></div> 35 </body> 36 </html>