anchor-pos-transform-01.html (747B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .container { 5 position: absolute; 6 left: 0; 7 top: 0; 8 } 9 .scroller { 10 position: absolute; 11 overflow: auto; 12 scrollbar-width: none; 13 width: 100px; 14 height: 100px; 15 transform: rotate(-40deg); 16 transform-origin: top left; 17 } 18 .spacer { 19 width: 1px; 20 height: 500px; 21 } 22 .anchor { 23 width: 50px; 24 height: 50px; 25 anchor-name: --my-anchor; 26 } 27 .anchored { 28 position: absolute; 29 position-anchor: --my-anchor; 30 position-visibility: always; 31 width: 50px; 32 height: 50px; 33 background: yellow; 34 left: anchor(right); 35 top: anchor(bottom); 36 } 37 </style> 38 <div class="container"> 39 <div class="scroller"> 40 <div class="anchor"></div> 41 <div class="spacer"></div> 42 </div> 43 <div class="anchored"></div> 44 </div> 45 </html>