W3cubDocs

/CSS

transform-box

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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;

Initial value	`border-box`
Applies to	transformable elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

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

Specification	Status	Comment
CSS Transforms Level 1 The definition of 'transform-box' in that specification.	Working Draft	Initial definition

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	64	No	55 55 43 Disabled Disabled From version 43: this feature is behind the `svg.transform-box.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. 41 — 43 Disabled Disabled From version 41 until version 43 (exclusive): this feature is behind the `svg.transform-origin.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	No	51	?