| <!DOCTYPE html> |
| <style> |
| #mask { |
| width: 200px; |
| height: 200px; |
| overflow: hidden; |
| border-radius: 10px; |
| border: 4px solid red; |
| background-color: grey; |
| transform-style: preserve-3d; |
| } |
| |
| .scale-seam { |
| position: relative; |
| left: 100px; |
| transform-origin: 0 0; |
| transform: scale(2, 1) rotateY(30deg) rotateX(30deg) rotateZ(30deg); |
| display: inline-block; |
| } |
| |
| .content { |
| width: 500px; |
| height: 500px; |
| filter: blur(15px); |
| } |
| </style> |
| <div class="scale-seam"> |
| <div id="mask"> |
| <div class="content" style="left: 0;top: 0;background: black;"></div> |
| </div> |
| </div> |
