[css-logical] Logical property values for `transform-origin`

[tomayac]

I have an app, SVGcode 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 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)…

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

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

[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?

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.

[mrego]

I guess this is a duplicate of #1544.

[tomayac]

Oh, nice. I'll close this Issue and add the comment to the existing Issue.