transform-box
Defines the bounding box that a transform (like a rotation or scale) is relative to. This is especially important for SVG elements where you might want to rotate an object around its own center instead of the SVG's top-left corner.
Quick example
svg .gear {
transform-origin: center;
/* Ensures the gear rotates around its own center, not the SVG viewport coordinate (0,0) */
transform-box: fill-box;
transform: rotate(45deg);
}Quick facts
Initial value
view-boxInherited
No
Applies to
transformable elements
Animation type
discrete
Values
content-boxborder-boxfill-boxstroke-boxview-box transform-box Browser Support
Newly available Since 2024 95% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
64+
55+
11+
79+