preserves3d-nested.html (719B)
1 <!DOCTYPE HTML> 2 <title>preserve-3d consequence nested context</title> 3 <style> 4 .rect { 5 width: 100px; 6 height: 100px; 7 background-color: green; 8 } 9 10 #outeri { 11 transform-style: preserve-3d; 12 transform: rotateX(45deg); 13 } 14 15 #inner { 16 transform: rotateX(0deg); 17 } 18 19 #inneri { 20 transform-style: preserve-3d; 21 transform: rotateX(45deg); 22 } 23 24 #rect2 { 25 transform: translate(50px, 50px); 26 background-color: pink; 27 } 28 29 #rect3 { 30 background-color: red; 31 } 32 33 </style> 34 <body> 35 <div id="outer"> 36 <div id="outeri"> 37 <div id="rect1" class="rect"></div> 38 <div id="rect2" class="rect"></div> 39 <div id="inner"> 40 <div id="inneri"> 41 <div id="rect3" class="rect"></div> 42 </div> 43 </div> 44 </div> 45 </div> 46 </body>