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