Re: [csswg-drafts] [css-transforms][css-logical] Flow-relative Transforms (#1544)

I have an app, [SVGcode](https://svgco.de/) that has an LTR and an RTL layout with hoverable elements that scale up from the corner to the middle at the logical start and end of the inset inline and the inset block. A reduced reproduction case can be found in this [demo](https://sugary-feline-approach.glitch.me/) on Glitch (hover over the avatar).

While I can position the images logically via the CSS below (disregard that this could be achieved with margin as well)…

```css
img {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
}
```

…I have to hand-code the `transform-origin` as follows:

```css
[dir=ltr] img {
  transform-origin: top left;
}

[dir=rtl] img {
  transform-origin: top right;
}
```

Would it be feasible to make `transform-origin` respect `inline-start/end` and `block-start/end` as values, so that the CSS could look as follows?

```css
img {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
  transform-origin: block-start inline-end; /* Doesn't currently work */
}
``` 

Or maybe I'm overlooking something, in this case sorry for the noise and thanks for a pointer where I could read up upon the current solution.

(Migrated from https://github.com/w3c/csswg-drafts/issues/7051.)

-- 
GitHub Notification of comment by tomayac
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1544#issuecomment-1040184719 using your GitHub account


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

Received on Tuesday, 15 February 2022 11:54:23 UTC