transform-box
transform-box picks the box (the reference box) that transform-origin and percentages in translate are measured against. It is mostly used to rotate SVG shapes around their own center.
Syntax
content-box | border-box | fill-box | stroke-box | view-boxPreview
Code
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
border: 16px solid rgb(31 41 55 / 0.3);
padding: 32px;
transform-origin: left top;
transform: rotate(30deg) scale(0.6);
transform-box: content-box;
}Controls
About
Writing the value
content-box: the box inside the padding.border-box: the box out to the outer edge of the border.fill-box: the box around the SVG shape itself.stroke-box: the box around the SVG shape, including the stroke width.view-box: the initial value. The nearest SVG viewport (its viewBox).
On HTML elements, fill-box is the same as content-box, and stroke-box and view-box are the same as border-box. So on HTML elements, the initial reference box goes out to the outer edge of the border.
What it changes
It changes which box the transform-origin point and percentages such as translate(50%) are taken from. The preview adds a border and padding with helper declarations, and rotates and shrinks the box with rotate(30deg) scale(0.6) around transform-origin: left top. The dashed frame is the original position. With content-box, the origin is the inner corner of the padding; with border-box, it is the outer corner of the border, so the box ends up in a different place.
When to use it
For a shape inside an SVG, the initial view-box uses the whole SVG viewport, and transform-origin also starts at the top left (0 0). To spin a shape around its own center in an animation, combine transform-box: fill-box with transform-origin: center.
Watch out
- Works in all major browsers.
content-boxandstroke-boxarrived in Chrome and Edge 118 and Firefox 125.