opacity-preserve3d-3-ref.html (878B)
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 .third { 14 top: 80px; 15 } 16 .preserve { 17 transform-style: preserve-3d; 18 } 19 .leaf { 20 width: 100px; 21 height: 100px; 22 position:absolute; 23 } 24 </style> 25 </head><body> 26 27 <div class="preserve"> 28 <div style="opacity:0.5; transform:translateX(0px)"> 29 <div class="leaf first"></div> 30 <div class="leaf second"></div> 31 <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas> 32 </div> 33 </div> 34 <script> 35 var canvas = document.getElementById("canvas"); 36 var ctx = canvas.getContext("2d"); 37 ctx.fillStyle = "red"; 38 ctx.fillRect(0, 0, 100, 100); 39 </script> 40 </body> 41 </html>