The CSS transform-box Property

Overview

The transform-box property specifies the area of an element to which transformation properties, such as transform, individual transform properties like translate, scale, and rotate, and transform-origin, are applied. It designates the layout box, serving as the reference point for these transformations.

Although SVG elements are often highlighted in demonstrating the property due to their complex transformation capabilities, it's crucial to note that transform-box is not exclusive to SVGs. It could be used with any transformable element.

Examples and Usage

To demonstrate the transform-box property we'll use an SVG rectangle that rotates around its own center. The effect is achieved by combining transform-origin, transform-box, and animation properties.

HTML Structure

Our HTML structure contains an SVG container that houses a rectangle and a circle. This circle will act as a reference dot, providing a visual aid to help track the rectangle's rotation. The viewBox attribute on the SVG container sets up a user coordinate system that extends over 50 x 50 units.

Positioned within this defined coordinate system is our rectangle and reference dot. The viewBox attribute is instrumental in this context as it establishes the aspect ratio and coordinate system of the SVG, directly influencing the transformations we'll apply later.

<svg class="svgDisplay" viewBox="0 0 50 50">
  <rect class="rotatingRect" x="5" y="5" width="10" height="10" />
  <circle class="referenceDot" cx="10" cy="10" r="1" />
</svg>

CSS Styling

The accompanying CSS provides the visual aesthetics for our elements and applies the necessary transformations to the rectangle. It makes use of the transform-box property to manipulate the rectangle within the boundary set by the SVG's viewBox.

.svgDisplay {
  /* Determine the dimensions of the SVG container and apply a red border for visibility */
  width: 200px;
  height: 200px;
  border: 2px solid red;
}

.rotatingRect {
  /* Apply a yellow fill color to the rectangle */
  fill: #FBBF24;
  /* Center the transformation origin inside the rectangle */
  transform-origin: 50% 50%;
  /* Set the object bounding box (fill box) as the reference box for transformations */
  transform-box: fill-box;
  /* Attach a continuous rotation animation to the rectangle */
  animation: rotateBox 3s linear infinite;
}

.referenceDot {
  /* Fill the reference dot with black for contrast */
  fill: black;
}

@keyframes rotateBox {
  to {
    /* Indicate the rotation transformation at the end of the animation cycle */
    transform: rotate(180deg);
  }
}

So, the .svgDisplay class provides specific dimensions and a red border for the SVG container, enhancing visibility. The .rotatingRect class styles the rectangle with a yellow fill color, centered transformation origin, and sets the transform-box property to fill-box so that the transformations are applied relative to the rectangle's bounding box.

Additionally, an infinite rotation animation is applied to the rectangle. Lastly, the reference dot, styled by the .referenceDot class, is filled with black, offering contrast and helping to visually track the rectangle's rotation. The keyframes rule defines the state of the rectangle at the end of the animation cycle.

Values

The transform-box property accepts the following values:

Values	Description
`content-box`	Sets the content box as the reference point. In `<table>` elements, the reference becomes the border box of the table wrapper box.
`border-box`	Employs the border box as the reference point. Similar to `content-box`, for `<table>` elements, the reference changes to the border box of the table wrapper box.
`fill-box`	Uses the object bounding box as the reference point. For elements with a CSS layout box, this value behaves like `content-box`.
`stroke-box`	Chooses the stroke bounding box as the reference point. If the element has a CSS layout box, this value acts like `border-box`.
`view-box`	Takes the nearest SVG viewport as the reference point. If the SVG element has a `viewBox` attribute, the reference point is positioned at the origin of the coordinate system defined by the `viewBox`. The dimensions of the reference point match the width and height values of the viewBox attribute. For elements with a CSS layout box, this value acts like `border-box`.

Note: In our example above, we used the fill-box value, which makes the object bounding box of the SVG rectangle the reference box for transformations.

Associated Properties

transform
transform-origin
translate
rotate
scale

Tips and Tricks

Although transform-box can be applied to any transformable element, it doesn't guarantee noticeable effects if the element doesn't have explicit or implicit transformations set. For instance, without any rotation or scale transformations, the impact of transform-box might not be visible.
transform-box might behave differently in SVG and HTML contexts. For HTML elements, fill-box and stroke-box behave as content-box and border-box, respectively, because HTML doesn't recognize object bounding box or stroke bounding box concepts like SVG does.
Remember that transform-box works in tandem with the transform-origin property. By changing the reference box, you're also adjusting the origin point for transformations, which can significantly affect the outcome of transformations.
When animating SVG elements, setting transform-box to fill-box or view-box can provide smoother and more predictable animations, especially when combined with transform-origin.

Browser Compatibility

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)