transform-box

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

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

Syntax

The transform-box property is specified as one of the keyword values listed below.

Values

border-box

The border box is used as the reference box. The reference box of a <table> is the border box of its table wrapper box, not its table box.

fill-box

The object bounding box is used as the reference box.

view-box

The nearest SVG viewport is used as the 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

Specifications

Browser compatibility

See also

• Using CSS transforms
• transform, transform-origin