intermediate-1.html (620B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <style type="text/css"> 7 8 div { 9 position: absolute; 10 width: 100px; 11 height: 100px; 12 } 13 14 .opacity { 15 opacity: 0.99; 16 } 17 18 .green { 19 transform-style: preserve-3d; 20 background-color: green; 21 } 22 23 .flat { 24 transform: translateZ(0px); 25 } 26 27 .red { 28 width: 300px; 29 height: 100px; 30 background-color: red; 31 } 32 33 .translate { 34 transform: translateX(100px); 35 } 36 37 </style> 38 </head> 39 40 <body> 41 <div class="red"></div> 42 <div class="green"> 43 <div class="flat"> 44 <div class="translate opacity green"> 45 <div class="translate green"> </div> 46 </div> 47 </div> 48 </div> 49 </body> 50 </html>