[css-transforms] Feature request: implement transform-box: view-box

[FirstByteFirst]

One of the reasons you currently can't make an animation that moves an image to Topright of the viewport (see #11484) is that animations don't live in an environment. All values for the animation (including origin) are relative to the element animated (except px values - those are absolute, but not scalable).

If I'm right transform-box: view-box; would do the job but that one doesn't exists for HTML (?). Even better would be transform-box: view-box #mydiv; where mydiv is the id of an element. Note: below I refer to the animated element as "image". In practice it can be any animatable element.

A superb solution would be:

In case transform-box: view-box;
. Let IX be the X-postion of the image
. Let IW be the width of the image
. Let IR be IX + IW
. Let VW be the viewport-width

. When transform-origin is top left,center left or bottom left: translateX(100%) would move the image (VW - IR) pixels. So the image would be visible and aligned to the right side of the viewport.
. When transform-origin is top right, center right or bottom right: translateX(100%) would move the image (VW - IX) pixels. The image would not be visible because its X position would be >= viewport-width after animation.
. When transform-origin is top center, center center or bottom center: translateX(100%) would move the image (VW - (IX+IW/2) ) pixels. The left half of the image would be visible.

Simular for Y-values

Notes:

1. in case transform-box: view-box #mydiv; (where mydiv is the id of a div or any other animatable DOM-element):
   . Let VW be the width of that DOM element and do the same calculations.
   if the image is initially not within the dimensions of the DOM element the begin of the animation will suddenly move the image from "out of range" to "in range".
2. Other lenghts named in translateX() (ex. translateX(2em)) would still have the same meaning as without the view-box.
3. translateX(calc(100% - 10px)) would still be flagged as a percentage because one of its operands is a percentage