Transform-box - Property CSS

Syntax diagram of transform-box.

Description of the transform-box property.

The property transform-box defines what the reference box for transformations is, the exact reference point (the fixed point) being defined by transform-origin.

Example: a rotation was applied to the element below; in the first case, the reference box is the border (border-box), in the second case it is the content (content-box). The fixed point, the one that undergoes no transformation, is slightly offset, and the result is noticeably different.

transform-box:border-box;
transform-origin:0 0;
transform:rotate(20deg);

transform-box:content-box;
transform-origin:0 0;
transform:rotate(20deg);

Refer to the transform property for a more general overview of transformations, and also to the transform-origin property.

Values for transform-box.

• transform-box: content-box;

  This value sets the reference box to the content, therefore excluding the inner margins (padding), and the border thickness.

  Margin

  Border

  Padding

  Content
  transform-box:content-box;
transform-origin:0 0;
• transform-box: border-box;

  Cette valeur définit la boîte de référence à la bordure de l'élément, en incluant les marges intérieures, l'épaisseur de la bordure, mais en excluant les marges extérieures.

  Margin

  Border

  Padding

  Content
  transform-box:border-box;
transform-origin:0 0;
• transform-box: view-box; transform-box: fill-box; transform-box: stroke-box;

  These values are rather suited to SVG elements. In HTML, we have the following equivalences:
  view-box ⇔ border-box
fill-box ⇔ content-box
stroke-box ⇔ border-box.

• transform-box: initial; (view-box) transform-box: inherit; transform-box: revert; transform-box: revertLayer; transform-box: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the transform-box property.

The animation of transform-box alone does not produce very spectacular effects. For the demonstration below, the blue element was subjected to two animations:

• A first one, quick, on transform-box.
• A second one, slower on transform.

Manipulating the transform-box property programmatically.

With Javascript, change the value of transform-box.

In JavaScript, here is how to modify the reference box for transformations. JavaScript offers a syntax with the typical CSS notation, the property name written in kebab-case, and another syntax with the property name written in camel-case, more common in JavaScript.

let el = document.getElementById('id'); el.style['transform-box'] = 'border-box'; // or let el = document.getElementById('id'); el.style.transformBox = 'border-box';

With Javascript, read the value of transform-box.

This code works when the property has been assigned directly to the element itself via its style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['transform-box']; // or let el = document.getElementById('id'); let value = el.style.transformBox;

With Javascript, read the computed value of transform-box.

The computed value is the one that results from the evaluation of the cascade of inheritances. Failing that, the calculated value is equal to the initial value of the property (view-box in the case of transform-box). The calculated value is always available.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('transform-box');

With JQuery, change the value of transform-box.

JQuery also offers a solution to write or read the value of transform-box, and with a shorter syntax than that of Javascript.


$('#id').css('transform-box', 'border-box');
// or
$('#id').css('transformBox', 'border-box');


With JQuery, read the computed value of transform-box.

let value = $('#id').css('transform-box');

Other code examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS. These are all codes that interact with CSS.

Test it yourself.

The buttons below apply the entered value to the property transform-box and then display either the value as it was applied, or the computed value. This second option allows you to see how the value of transform-box is stored (serialized). However, in the case of transform-box, there will be no difference between these two values because the property only accepts predefined values.

Simulator.

The border of the rotating element is excessively thick, in order to clearly show the effect of the property transform-box. Furthermore, the value of transform-origin has been set to 0px 0px, which corresponds to the top-left corner of the element. That is, the red point when using border-box as a reference, or the green point if the reference is fill-box.

Browsers compatibility with transform-box.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

(2) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1

2D
transformations

2

3D
transformations

3

transform-box
property

Estimated overall support.

97%

97%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Historic of the transform-box property.

• CSS Transforms Module Level 1

  This specification module defines 2D transformations (in the plane of the screen) that can be applied to elements with the transform property.
  It also defines functions related to transformations (translation, rotation, scaling, and zoom effect).

  Regarding transform-box. Introduction of 2D transformations via CSS.
  First definition of the transform-box property.
  

  February 28, 2012

  Working Draft.

  

  February 14, 2019

  Candidate Recommendation.

  

  

• CSS Transforms Module Level 2

  In addition to the 2D transformations already presented in level 1 of the specification, this module deals with 3D transformations. It introduces new properties to manage the viewpoint height and the rendering of 3D effects.
  This module also introduces the individual properties of rotation, translation, and zoom effect.

  Regarding transform-box. This level of the specification introduces 3D transformations.
  No change directly affecting the transform-box property.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, regarding transformations.

The CSS Transforms Module describes the property transform-box, and also includes all definitions concerning CSS transformations:

Properties:

backface-visibility

Visibility of the rear side of the element (while it is rotating).

perspective

A perspective effect applied to a 3D transformed element.

perspective-origin

Position of the observer in the case of a 3D distortion with perspective.

rotate

Defines a rotation to apply to the element.

scale

Sets a scaling of the element (magnification or shrinking).

transform

Applies one or more geometric transformations (rotations, enlargements, etc.).

Transform-box

Sets the reference box for transformations.

transform-origin

Sets the origin point for transformations.

transform-style

Defines how elements that undergo a 3D transformation are rendered.

translate

Applies a translation to an element (a linear displacement).

Functions:

matrix()

Applies a composite transformation to an element (translations, rotations...).

matrix3d()

Applies a series of 3D transformations to an element.

perspective()

Sets the height of the observer in the case of a 3D transformation.

rotate()

Sets a rotation to apply to the element in 2D (in the plane of the screen).

rotate3d()

Defines a 3D rotation to be applied to an element around any axis in 3D.

rotateX()

Defines a rotation of the element around the X-axis (in 3D),

rotateY()

Sets a 3D rotation of the element around the y-axis.

rotateZ()

Sets a rotation of the element around the z-axis.

scale()

Sets a magnification or reduction of the element.

scale3d()

Sets 3D scaling.

scaleX()

Sets X-axis scaling.

scaleY()

Set Y-axis scaling.

scaleZ()

Set Z-axis scaling.

skew()

Sets a tilt of the element along the X and/or Y axes.

skewX()

Sets a tilt of the element along the X-axis.

skewY()

Sets a tilt of the element along the Y-axis.

translate()

Defines a translation (a linear move) to an element.

translate3d()

Defines a 3D translation along one or more of the X, Y, and Z axes.

translateX()

Defines a translation along the X-axis (horizontally).

translateY()

Defines a translation along the Y axis (vertically).

translateZ()

Defines a translation along the Z axis (perpendicular to the screen).