transform-clip-ref.html (689B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- TODO: update link --> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Scoped view transform with transform and clip.</title> 9 </head> 10 <style> 11 #clipper { 12 background-color: hotpink; 13 overflow: clip; 14 height: 100px; 15 width: 100px; 16 border-radius: 50px; 17 position: absolute; 18 top: 20px; 19 left: 20px; 20 } 21 22 .item { 23 position: relative; 24 top: 25px; 25 height: 50px; 26 background-color: forestgreen; 27 } 28 29 </style> 30 <body> 31 <div id=clipper> 32 <div id=target class=item></div> 33 </div> 34 </body> 35 </html>