preserves3d-nested-filter-1.html (478B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Green square</title> 5 <style> 6 .filter { 7 filter: brightness(0.75); 8 } 9 10 .container { 11 width: 200px; 12 height: 200px; 13 14 transform-style: preserve-3d; 15 background-color: red; 16 } 17 18 .square { 19 position: absolute; 20 21 width: 200px; 22 height: 200px; 23 24 transform-style: preserve-3d; 25 background-color: green; 26 } 27 </style> 28 </head> 29 <body> 30 31 <div class="filter"> 32 <div class="container"> 33 <div class="square"></div> 34 </div> 35 </div> 36 37 </body> 38 </html>