| 123456789101112131415161718192021222324252627282930313233343536373839 |
- <!DOCTYPE html>
- <html><head>
- <style>
- .first {
- transform: translateZ(10px);
- background-color: blue;
- top: 0px;
- }
- .second {
- background-color: green;
- top: 40px;
- }
- .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>
- <canvas class="leaf second" 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>
|
