CSS - transform-box

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

Syntax  

CSS
/* 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;

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

CSS
border-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> fill-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> view-box

Description  

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

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

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 41.0 (41.0)[1] Not supported Not supported ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 41.0 (41.0)[1] ? ? ?

[1] This property is implemented in Gecko 43.0 (Firefox 43 / Thunderbird 43 / SeaMonkey 2.40) behind the preference svg.transform-box.enabled, defaulting to false. 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.

See Also  

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/transform-box

CSS CSS Property CSS Transforms Experimental NeedsBrowserCompatibility NeedsExample Reference