css-transform-3d-transform-style.html (1665B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transforms Test: rotateY with transform-style on nested elements</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/#transform-style-property"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> 9 <link rel="match" href="reference/css-transform-3d-transform-style-ref.html"> 10 <meta name="assert" content="Test checks that rotate the nested div with transform-style preserve-3d, rotated parent div for -60 degree on Y-axis then and rotated child div for 120 degree, at this time the parent and child should have equal width, then child div could cover the red box."> 11 <style> 12 div { 13 position: absolute; 14 } 15 div.container { 16 height: 100px; 17 top: 60px; 18 width: 400px; 19 } 20 div.blue { 21 background-color: blue; 22 height: 100px; 23 transform: rotateY(-60deg); 24 transform-style: preserve-3d; 25 width: 400px; 26 } 27 div.green { 28 background-color: green; 29 height: 100px; 30 transform: rotateY(120deg); 31 width: 400px; 32 } 33 div.red{ 34 background-color: red; 35 height: 100px; 36 left: 100px; 37 width: 200px; 38 } 39 </style> 40 </head> 41 <body> 42 <p>Test passes if there is a <b>green</b> square and a <b>blue</b> square, and no any <b>red</b>.</p> 43 <div class="container"> 44 <div class="red"></div> 45 <div class="blue"> 46 <div class="green"></div> 47 </div> 48 </div> 49 </body> 50 </html>