Post

@kevinpowell.co Hi Kevin! Do you know a way to use transform-origin with anchor positioning? I have anchor positioned custom selects that appear with a slight zoom animation, but I'd like them to transition from the anchor instead of from the center. Example: www.gb.nl/en/products/...

gb.nlUNI-self tapping wall tie | Gebr. BodegravenGebr. Bodegraven, shortly GB, is a brand for the professional builder.

Anoesj

@anoesj.dev

18 Sept 2025

The code right now :)

Anoesj

@anoesj.dev

Forgot to mention that the transition is done with Vue's <Transition> component (adds active + from/to classes, listens to transitionend events). I hoped transform-origin would work in the @position-try clause, but it doesn't seem to. Or transform-origin: anchor(top) anchor(left); Any ideas?

18/9/25, 9:48 am0 reposts0 likes

Kevin Powell

@kevinpowell.co

18 Sept 2025

transform origin is only if you are using transforms, like scale, translate, skew, rotate... but the zoom would be happening from scale, I'm assuming, so when the position-area is bottom, I'd have the transform-origin: top, and vice versa for when it's anchored to the top.

Anoesj

@anoesj.dev

19 Sept 2025

Yes, there are scale transitions in place here using Vue's <Transition> mechanism. I didn't screenshot them before, sorry for the unclarity. However, transform-origin does not (seem to) work in a @position-try clause 😕 github.com/w3c/csswg-dr...

Kevin Powell

@kevinpowell.co

19 Sept 2025

Ah, yeah, I get it now. That's one of the big limitations of them at the moment. I do know the level 2 parts are looking to add more awareness of where on another element something in anchored, so hopefully that helps.