css-transform-3d-rotate3d-Z-negative.html (1259B)
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-rotateZ-ref.html"> 9 <meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle."> 10 <style> 11 div { 12 height: 100px; 13 left: 80px; 14 position: absolute; 15 top: 80px; 16 width: 100px; 17 } 18 div.origin { 19 background-color: green; 20 } 21 div.redsquare { 22 background-color: red; 23 height: 38px; 24 left: 80px; 25 top: 111px; 26 width: 100px; 27 } 28 div.greensquare { 29 background-color: green; 30 height: 100px; 31 left: 110px; 32 top: 80px; 33 width: 40px; 34 transform: rotate3d(0,0,1,-90deg); 35 } 36 </style> 37 </head> 38 <body> 39 <p>Test passes if there is a green square and no red.</p> 40 <div class="origin"></div> 41 <div class="redsquare"></div> 42 <div class="greensquare"></div> 43 </body> 44 </html>