tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

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>