opacity-preserve3d-4.html (791B)
1 <!DOCTYPE html> 2 <html><head> 3 <style> 4 .first { 5 transform: translateZ(10px); 6 background-color: blue; 7 top: 0px; 8 } 9 .second { 10 background-color: green; 11 top: 40px; 12 } 13 .preserve { 14 transform-style: preserve-3d; 15 } 16 .leaf { 17 width: 100px; 18 height: 100px; 19 position:absolute; 20 } 21 </style> 22 </head><body> 23 24 <div class="preserve"> 25 <div class="preserve" style="opacity:0.5"> 26 <div class="leaf first"></div> 27 <canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas> 28 </div> 29 </div> 30 <script> 31 var canvas = document.getElementById("canvas"); 32 var ctx = canvas.getContext("2d"); 33 ctx.fillStyle = "red"; 34 ctx.fillRect(0, 0, 100, 100); 35 </script> 36 </body> 37 </html>