This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

/* Keyword values */
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;

/* Global values */
transform-box: inherit;
transform-box: initial;
transform-box: unset;

Initial valueborder-box
Applies totransformable elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

border-box
Uses the border box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box.
fill-box
Uses the object bounding box as reference box.
view-box
Uses the nearest SVG viewport as 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 syntax

border-box | fill-box | view-box

Specifications

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

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support64 No

55

431

41 — 432

No51 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support6464 No

55

431

41 —?3

No51 ?

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

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

3. From version 41: this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

 

See also

Document Tags and Contributors

 Contributors to this page: fscholz, David_Gilbertson, chrisdavidmills, Sebastianz, sraghav
 Last updated by: fscholz,