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

transform-box

The transform-box CSS property defines the layout box to which the transform, individual transform properties translate, scale, and rotate, and transform-origin properties relate.

Other

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