This page was translated from English by the community. Learn more and join the MDN Web Docs community.

transform-box

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

transform-box属性定义了与 transform、transform-origin 这两个属性有关联的布局框。

初始值view-box
适用元素transformable elements
是否是继承属性否
计算值as specified
Animation typediscrete

语法

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

transform-box属性被指定为以下所列出的关键字值之一。

值

border-box
border box是用作引用框,一个表格（table）的border-box是table包装盒的边框，而不是表的边框。
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

content-box | border-box | fill-box | stroke-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! (en-US)

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