css-transform-3d-rotate3d-Y-positive.html (1233B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transforms Test: rotate3d on div element</title> 6 <link rel="author" title="Intel" href="http://www.intel.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> 8 <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> 9 <meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> 10 <style> 11 div { 12 position: absolute; 13 } 14 div.redsquare { 15 background-color: red; 16 border: 20px solid black; 17 height: 120px; 18 left: 60px; 19 top: 60px; 20 width: 120px; 21 } 22 div.green { 23 background-color: green; 24 height: 120px; 25 left: 20px; 26 top: 80px; 27 transform: rotate3d(0,1,0,60deg); 28 width: 240px; 29 } 30 </style> 31 </head> 32 <body> 33 <p>Test passes if there is a green square with black border around, and no any red.</p> 34 <div class="redsquare"></div> 35 <div class="green"></div> 36 </body> 37 </html>