[csswg-drafts] Proposal: Transform Effects Applied Only to Background Layers (#13110)

mr-cheffy has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: Transform Effects Applied Only to Background Layers ==
Developers frequently want to animate or visually transform only the background of an element without affecting its children or layout. This is particularly common in UI interactions such as button press states, hover zoom, tilt effects, and parallax-like movement.

Today, these effects require workarounds that behave like "stage props" rather than built-in features: pseudo-elements, complex layering, or animating background-size in unintuitive ways. None of these approaches provide a native, reliable method to transform the background independently of the element's content. Developers would also simply just `transform: scale(...)` on the element itself, which makes bad UX in some cases.

Intent:

```css
button:active {
  background-transform: scale(0.92);
}
```

Today's workaround requires pseudo-elements:

```css
button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scale(.92);
}
```

This creates stacking, hit-testing, and overflow complications. The syntax would be the following:

```css
background-transform: none | <transform-list>;
```

Maybe this addition would also require an addition for `background-transform-origin`? Let me know what you guys think, thanks!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13110 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 15 November 2025 23:29:31 UTC