coderef

transform-boxBaseline · Newly available

The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Apr 16, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–117Not supported
118+Supportedsince Oct 10, 2023
Current: 155
Edge
12–117Not supported
118+Supportedsince Oct 13, 2023
Current: 154
Firefox
1–124Not supported
125+Supportedsince Apr 16, 2024
Current: 157
Safari
1–13Not supported
13.1+Supportedsince Mar 24, 2020
Current: 27
MobileChrome Android
18–117Not supported
118+Supportedsince Oct 10, 2023
Current: 155
Firefox Android
4–124Not supported
125+Supportedsince Apr 16, 2024
Current: 157
Safari iOS
1–13Not supported
13.4+Supportedsince Mar 24, 2020
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Apr 16, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: transform-box.

Feature detection

CSS · check before using
@supports (transform-box: initial) {
  /* styles that rely on transform-box */
}

/* or in JavaScript */
if (CSS.supports("transform-box", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (6). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
transform-box64795511645511
transform-box.border-box11811855111185511
transform-box.content-box11811812513.111812513.4
transform-box.fill-box64795511645511
transform-box.stroke-box11811812513.111812513.4
transform-box.view-box64795511645511