demo · v144

Transformed Anchor

Rotate, scale, translate the black box — the blue popover tracks its transformed bounding box. Before Chrome 144 the popover would stick to the un-transformed origin. Toggle the buttons to feel the difference.

anchor() resolves against: native (Chrome 144+) · transform: none
anchor
tethered popover

the API

.anchor   { anchor-name: --target; transform: rotate(20deg); }
.popover {
  position: absolute;
  position-anchor: --target;
  top: calc(anchor(bottom) + 8px);
  left: anchor(center);
  translate: -50% 0;
}
/* Chrome 144: anchor() now resolves against the
   transformed bounding box, not the unrotated one. */

see also