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 |
Syntax
The transform-box
property is specified as one of the keyword values listed below.
Values
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.
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 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-box | Chrome Full support 64 | Edge No support No | Firefox
Full support
55
| IE No support No | Opera Full support 51 | Safari Full support 11 | WebView Android Full support 64 | Chrome Android Full support 64 | Firefox Android
Full support
55
| Opera Android Full support 47 | Safari iOS Full support 11 | Samsung Internet Android Full support 9.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.