<!DOCTYPE html> <html><head> <style> .first { transform: translateZ(10px); background-color: blue; top: 0px; } .second { background-color: green; top: 40px; } .third { top: 80px; } .preserve { transform-style: preserve-3d; } .leaf { width: 100px; height: 100px; position:absolute; } </style> </head><body> <div class="preserve"> <div class="preserve" style="opacity:0.5"> <div class="leaf first"></div> <div class="leaf second"></div> <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas> </div> </div> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(0, 0, 100, 100); </script> </body> </html>