demo · v144

Orbit Tracker

A label tracking an animating, transformed anchor — 60fps, no JavaScript. Before Chrome 144 the label sat motionless at the anchor's untransformed origin; with this update anchor() resolves against the transformed rectangle on every frame.

position-anchor + transform: checking…

Watch the rose label stay glued above the spinning blue planet. With JS fallback the position is updated on rAF; CSS-native is one declaration.
planet
tracking

the API

.orbiter {
  anchor-name: --planet;
  transform-origin: -90px center;
  animation: spin 6s linear infinite;
}
.label {
  position-anchor: --planet;
  top: anchor(top);
  left: anchor(center);
  translate: -50% calc(-100% - 8px);
}
/* Chrome 144: anchor() reads the live transformed box on each frame. */

see also