We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS




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

适用元素transformable elements
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar


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


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.
Uses the object bounding box as reference 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

border-box | fill-box | view-box


Specification Status Comment
CSS Transforms Level 1
Working Draft Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现 41.0 (41.0)[1] 未实现 未实现 ?
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


此页面的贡献者: WarriorWu
最后编辑者: WarriorWu,