CSS transform-box Property

Description

The transform-box CSS property defines the reference box for CSS transformations, such as scale, rotate, and translate. By default, transformations are applied relative to the element's own content box, but transform-box allows you to change this reference point. You can set it to values like fill-box (the entire element including padding), view-box (the element's border box), or stroke-box (the element's border box without any stroke or outline). This property is particularly useful when you want to control how transformations affect the positioning and scaling of elements, especially within complex layouts and SVG graphics.

Initial value: view-box
Applies to: transformable elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.transformBox

Syntax

transform-box: content-box | border-box | fill-box | stroke-box | view-box

Values

content-boxThe content box is used as the reference box. The reference box of a <table> is the border box of its table wrapper box, not its table box.
border-boxThe border box is used as the reference box. The reference box of a <table> is the border box of its table wrapper box, not its table box.
fill-boxThe object bounding box is used as the reference box. For elements with associated CSS layout box, acts as content-box.
stroke-boxThe stroke bounding box is used as the reference box. For elements with associated CSS layout box, acts as border-box.
view-boxThe nearest SVG viewport is used as the reference box. If a viewBox attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute, and the dimension of the reference box is set to the width and height values of the viewBox attribute.

Example

HTML

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">

  <g>

    <circle id="center" fill="red" r="1" transform="translate(25 25)" />

    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />

    <rect

      id="box"

      x="10"

      y="10"

      width="10"

      height="10"

      rx="1"

      ry="1"

      stroke="black"

      fill="none" />

  </g>

</svg>

CSS

svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#box {
  transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
  transform-box: fill-box;
  animation: rotateBox 3s linear infinite;
}

@keyframes rotateBox {
  to {
    transform: rotate(360deg);
  }
}

Result

Editor