opacity-preserve3d-1-ref.html (863B)
1 <!DOCTYPE html> 2 <html><head> 3 <style> 4 .first { 5 transform: translateZ(10px); 6 background-color: blue; 7 top: 60px; 8 } 9 .second { 10 transform: translateZ(5px); 11 background-color: green; 12 top: 40px; 13 } 14 .third { 15 transform: translateZ(-5px); 16 background-color: yellow; 17 top: 20px; 18 } 19 .fourth { 20 transform: translateZ(-10px); 21 background-color: red; 22 } 23 .preserve { 24 transform-style: preserve-3d; 25 } 26 .leaf { 27 width: 100px; 28 height: 100px; 29 position:absolute; 30 } 31 </style> 32 </head><body> 33 34 <div class="preserve"> 35 <div class="leaf first"></div> 36 <div style="opacity:0.5"> 37 <div class="leaf second"></div> 38 <div class="leaf fourth"></div> 39 </div> 40 <div class="leaf third"></div> 41 </div> 42 43 </body> 44 </html>