1. css
  2. /properties
  3. /transform-box



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" />

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.


The transform-box property accepts the following values:

content-boxSets the content box as the reference point. In <table> elements, the reference becomes the border box of the table wrapper box.
border-boxEmploys 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-boxUses the object bounding box as the reference point. For elements with a CSS layout box, this value behaves like content-box.
stroke-boxChooses the stroke bounding box as the reference point. If the element has a CSS layout box, this value acts like border-box.
view-boxTakes 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

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

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)

Useful Resources

Can I use: transform-box

CSS Transforms Module Level 1 Specification - transform-box

transform-box on Chrome Platform Status