| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| .overflow-hidden { overflow: hidden; } |
| .first-row { top: 25px; } |
| .second-row { top: 300px; } |
| .first-column { left: 50px; } |
| .second-column { left: 350px; } |
| .affine-transform { transform: rotateZ(25deg); } |
| .perspective-transform { transform: perspective(300px) rotateX(15deg) rotateZ(15deg); } |
| |
| div.container { |
| position: absolute; |
| width: 150px; |
| height: 150px; |
| background-color: lightgray; |
| border: 10px solid black; |
| padding: 15px; |
| margin: 20px; |
| } |
| |
| /* Injected inbetween 'container' / 'content' layers to clip the content |
| layer as the SVG root clips the children: clip to content, not padding box. |
| (The overflow: hidden handling differs where SVG, clip to exact size of SVG |
| viewport is demanded, whereas CSS requires to clip to the padding-box.) */ |
| div.clip { |
| position: absolute; |
| left: 0px; |
| top: 0px; |
| width: 100%; |
| height: 100%; |
| clip-path: inset(0px 15px 15px 0px); /* Inset by 'container' padding. */ |
| } |
| |
| div.content { |
| position: absolute; |
| left: 115px; |
| top: 65px; |
| width: 150px; |
| height: 100px; |
| background-color: green; |
| transform-origin: -100px -50px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container first-row first-column"> |
| <div class="content affine-transform"></div> |
| </div> |
| <div class="container first-row second-column overflow-hidden"> |
| <div class="clip"> |
| <div class="content affine-transform"></div> |
| </div> |
| </div> |
| |
| <div class="container second-row first-column"> |
| <div class="content perspective-transform"></div> |
| </div> |
| <div class="container second-row second-column overflow-hidden"> |
| <div class="clip"> |
| <div class="content perspective-transform "></div> |
| </div> |
| </div> |
| </body> |
| </html> |
