Newly availableUseful when transform-box adds a clear capability without requiring fragile workarounds.
Other Newly available

transform-box

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

Other

Overview

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

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
transform-box
64
79
55
11
64
11
border-box
118
118
55
11
118
11
content-box
118
118
125
13.1
118
13.4
fill-box
64
79
55
11
64
11
stroke-box
118
118
125
13.1
118
13.4
view-box
64
79
55
11
64
11
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.svg-element {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

Live demo

fill-box

CSS Fill-box demo.

PreviewFullscreen

stroke-box

CSS Stroke-box demo.

PreviewFullscreen

view-box

CSS View-box demo.

PreviewFullscreen

Use cases

  • Browser-native behavior

    Use transform-box to rely on the platform for behavior that would otherwise require extra code or CSS complexity.

  • Progressive enhancement

    Enhance the experience where support exists while keeping a solid baseline elsewhere.

Cautions

  • Check browser support and actual product need before adding a new platform feature widely.
  • Keep feature usage understandable so future contributors know why it was chosen.

Accessibility

  • New platform features should still preserve readable defaults and robust interaction patterns.
  • Verify that enhancement paths do not leave unsupported environments with a broken experience.

Related links

Powered by web-features