W3cubDocs

/CSS

transform-box

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

/* Keyword values */
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: unset;

Syntax

The transform-box property is specified as one of the keyword values listed below.

Values

content-box

The 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-box
The 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-box
The object bounding box is used as the reference box.
stroke-box
The stroke bounding box is used as the reference box.
view-box
The 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.

Formal definition

Initial value view-box
Applies to transformable elements
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

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

Examples

SVG transform-origin scoping

In this example we have an SVG:

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

In the CSS we have an animation that uses a transform to rotate the rectangle infinitely. transform-box: fill-box is used to make the the transform-origin the center of the bounding box, so the rectangle spins in place. Without it, the transform origin is the center of the SVG canvas, and so you get a very different effect.

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

#box{
  transform-origin:50% 50%;
  /*+++++++++++++++++++++++++++*/
  /* if I remove this rule the pen won't work properly on Chrome for Mac, FF, Safari
  Will still work properly on Chrome for PC & Opera*/
  transform-box: fill-box;
  /*Alternatively  I can use transform-origin:15px 15px;*/
  /*+++++++++++++++++++++++++++*/
  animation: rotateBox 3s linear infinite;
}

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

Full credit for this example goes to Pogany; see this codepen for a live version.

Specifications

Specification Status Comment
CSS Transforms Level 1
The definition of 'transform-box' in that specification.
Working Draft Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
transform-box 64 79 55
55
43
Disabled
Disabled From version 43: this feature is behind the svg.transform-box.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
41 — 43
Disabled
Disabled From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 51 11
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
transform-box 64 64 55
55
43
Disabled
Disabled From version 43: this feature is behind the svg.transform-box.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
41 — 43
Disabled
Disabled From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
47 11 9.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box