Thursday 19 August 2021

Get "absolute" CSS transformation matrix

I am implementing a set of custom elements that will be used like this:

<om-root>
  ...
  <om-node id="node1">
    ...
    <om-node id="node2">
      ...
    </om-node>
    ...
  </om-node>
  ...
<om-root>

That is, my <om-node> elements will be mixed in with arbitrary HTML, which may have positioning and/or CSS transform applied.

The purpose of these <om-node> elements is to apply CSS affine transformations to their content based on various conditions. But regardless of its position in the hierarchy, each om-node computes a transformation relative to the root node.

I can't just apply the computed transformation to the node, because the browser will combine that with the transformations of all its ancestor elements: if I rotate node1 by 30 degrees, then node2 will also be rotated by 30 degrees before its own transformation is applied.

Ideally, what I want is something that works like Element.getClientRects(), but returns a matrix rather than just a bounding box. Then I could do some math to compensate for the difference between the coordinate systems of the <om-node> and <om-root> elements.

This question is similar to mine, but doesn't have a useful answer. The question mentions using getComputedStyle(), but that doesn't do what is claimed – getComputedStyle(elt).transform returns a transformation relative to the element's containing block, not the viewport. Plus, the result doesn't include the effects of "traditional" CSS positioning (in fact it doesn't have a value at all for traditionally-positioned elements).

So: Is there a robust way to get the transformation matrix for an element relative to the viewport?

The layout engine obviously has this info, and I'd prefer not to do a complicated (and expensive) tree-walking process every time anything changes.



from Get "absolute" CSS transformation matrix

No comments:

Post a Comment