transform-box

概述

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

语法

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;

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.

形式定义

初始值view-box
适用元素可变换元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

transform-box = 
content-box |
border-box |
fill-box |
stroke-box |
view-box

规范

Specification
CSS Transforms Module Level 1
# transform-box

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transform-box
border-box
content-box
fill-box
stroke-box
view-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见