This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
/* 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 |
The transform-box property is specified as one of the keyword values listed below.
border-box<table> is the border box of its table wrapper box, not its table box.fill-boxview-boxviewBox 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.border-box | fill-box | view-box
| Specification | Status | Comment |
|---|---|---|
| CSS Transforms Level 1 The definition of 'transform-box' in that specification. | Working Draft | Initial definition |
| 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 | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 64 | 64 | No |
55 431 41 —?3 |
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.
© 2005–2018 Mozilla Developer Network 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