翻译正在进行中。
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
The transform-box property defines the layout box, to which the transform and transform-origin properties relate to.
| 初始值 | border-box |
|---|---|
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* 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
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 transform-box |
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.