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 value | border-box |
---|---|
Applies to | transformable elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the 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 theviewBox
attribute and the dimension of the reference box is set to the width and height values of theviewBox
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
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 64 | No | 55 431 41 — 432 | No | 51 | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 64 | 64 | No | 55 431 41 —?3 | No | 51 | ? |
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.