[csswg-drafts] Accept transform-origin inside @position-try (#12169)

Zhang-Junzhi has just created a new issue for https://github.com/w3c/csswg-drafts:

== Accept transform-origin inside @position-try ==
When implementing a pop-over with anchor positioning, a common pattern is to animate its appearance using transforms (e.g., scaling or rotating). In such cases, it’s often desirable to set the transform origin at the vertex closest to the anchor point. Example:

```
.some-popover-ele
{
    display: none;
    opacity: 0;
    transform: scale(.97);
    transition: transform .2s, opacity .2s, display .2s allow-discrete, overlay .2s allow-discrete;
    position: absolute;
    top: calc(anchor(bottom) + 5px);
    left: anchor(left);
    transform-origin: top left;
    position-try: --popover-from-top-left, --popover-from-bottom-right, --popover-from-top-right;
}

.some-popover-ele:popover-open
{
    display: block;
    opacity: 1;
    transform: none;
    @starting-style
    {
        opacity: 0;
        transform: scale(.97);
    }
}

@position-try --popover-from-top-left
{
    top: auto;
    bottom: calc(anchor(top) + 5px);
    transform-origin: bottom left;
}

@position-try --popover-from-bottom-right
{
    left: auto;
    right: anchor(right);
    transform-origin: top right;
}

@position-try --popover-from-top-right
{
    left: auto;
    right: anchor(right);
    top: auto;
    bottom: calc(anchor(top) + 5px);
    transform-origin: bottom right;
}
```

Unfortunately, `transform-origin` is currently not allowed within `@position-try`. Therefore, I propose adding support for `transform-origin` in this context.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12169 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 7 May 2025 05:49:41 UTC