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.
It is documented as part of the CSS Transforms specification.
Syntax
/* Usage 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);
}
/* Syntax */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;
/* Global values */
transform-box: inherit;
transform-box: initial;
transform-box: revert;
transform-box: revert-layer;
transform-box: unset;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.
64+
55+
11+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more