mix-blend-mode-transformed.html (520B)
1 <!DOCTYPE HTML> 2 <head> 3 <style> 4 .outer { 5 transform: scale(0.5) translate(200px, 200px); 6 } 7 .parent { 8 width: 200px; 9 height: 200px; 10 isolation: isolate; 11 background: #5856a2; 12 } 13 .child { 14 width: 200px; 15 height: 200px; 16 mix-blend-mode: soft-light; 17 opacity: 0.5; 18 background: white; 19 will-change: opacity; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="outer"> 25 <div class="parent"> 26 <div class="child"> 27 </div> 28 </div> 29 </div> 30 </body>