This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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
viewBoxattribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by theviewBoxattribute and the dimension of the reference box is set to the width and height values of theviewBoxattribute.
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | No support | 55.0 (55.0)[1] | No support | No support | ? |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | ? | 55.0 (55.0)[1] | ? | ? | ? |
[1] This property was implemented in Gecko 43.0 (Firefox 43 / Thunderbird 43 / SeaMonkey 2.40) behind the preference svg.transform-box.enabled, defaulting to false. Since Gecko 55.0 (Firefox 55.0 / Thunderbird 55.0 / SeaMonkey 2.52) the preference defaults to true. Initially it was implemented in Gecko 41.0 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) with the preference named svg.transform-origin.enabled. See bug 923193 and bug 1208550.