The transform-origin property defines the pivot point used when an element is transformed — in other words, it selects the origin about which transformations such as rotation, scaling and skewing are performed. Changing this origin does not itself reposition the element in normal document flow; instead it alters how subsequent transforms applied to the element take effect, often producing very different visual results even when the same transform is used. Because it changes the center of action for geometric operations, it is especially important when you need precise control over rotation arcs, scale anchors, or the apparent point of expansion and contraction.

The origin is resolved relative to the element’s geometric box, and which box is used can alter the result for elements like SVG or replaced elements; that relationship is influenced by the transform-box setting. The transform you apply will use that origin as its reference point, and in three-dimensional contexts the origin can include a depth component along the Z axis, changing the perceived spatial behavior of rotations and translations. When a 3D perspective is present, the visual effect of moving the origin interacts with the scene’s depth; the perspective you apply to the parent or containing block will therefore change how dramatic those shifts appear.

Because the origin determines the geometry of transform operations, animating it can create motion that appears to pivot around a changing point — rotations can sweep differently and scales can look like they grow from evolving anchors. You can animate changes to the origin itself so that the pivot moves smoothly while other transforms run; this is commonly coordinated with the transition or animation timing of the transform to produce natural-looking motion. Keep in mind that transforms and their origins are handled by the compositor rather than the layout engine, so altering the origin or transforms typically avoids reflow but can affect painting and stacking in complex scenes.