[css-backgrounds-4] Transformation of background images

[xfq]

Spec: https://drafts.csswg.org/css-backgrounds-4/

Currently, there is no way to rotate or skew the background image(s) of an element with CSS, so web developers can only transform the whole element. With this feature added (by adding a background-transform property, for example), backgrounds like [1] might only need one small image (instead of four different ones, or a large one) and thus save some bytes.

Tagging css-backgrounds-4 for now. Feel free to change it to css-transforms if it's more appropriate.

[1] https://codepen.io/chriscoyier/pen/jZBLrN

---

See also:

• https://stackoverflow.com/questions/5768998/how-to-flip-background-image-using-css (related question on Stack Overflow)
• https://www.sitepoint.com/css3-transform-background-image/ (a workaround to the lack of this feature)

[SebastianZ]

The feature to transform an image shouldn't be restricted to background images. It should work for all properties that take images like mask-image, list-style-image, content, cursor, etc.

Therefore I'd rather change the <image> type to allow applying transform functions. This could then look like so:

<image> = [ <url> | <image()> | <image-set()> | <cross-fade()> | <gradient> ] <transform-list>?

Example:

background-image:
    url("https://my.super/fancy/corner-image.svg"),
    url("https://my.super/fancy/corner-image.svg") rotate(90deg),
    url("https://my.super/fancy/corner-image.svg") rotate(180deg),
    url("https://my.super/fancy/corner-image.svg") rotate(270deg);

This could even be extended to allow to specify the transform origin:

<image> = [ <url> | <image()> | <image-set()> | <cross-fade()> | <gradient> ] [<transform-function> <'transform-origin'>? ]*

@xfq's example could then be achieved like this:

background-image:
    url("https://my.super/fancy/corner-image.svg"),
    url("https://my.super/fancy/corner-image.svg") scale(1, -1) center,
    url("https://my.super/fancy/corner-image.svg") scale(-1, 1) center,
    url("https://my.super/fancy/corner-image.svg") scale(-1, -1) center;

Sebastian

[SebastianZ]

This use case will be covered by the image manipulation at-rule discussed in #6807.

With that rule and the related function (names still need to be discussed) the example from above would look like this:

@image --rotate-90deg { rotate: 90deg; }
@image --rotate-180deg { rotate: 180deg; }
@image --rotate-270deg { rotate: 270deg; }

background-image:
    url("https://my.super/fancy/corner-image.svg"),
    image(url("https://my.super/fancy/corner-image.svg"), --rotate-90deg),
    image(url("https://my.super/fancy/corner-image.svg"), --rotate-180deg),
    image(url("https://my.super/fancy/corner-image.svg"), --rotate-270deg);

Sebastian

[SebastianZ]

@xfq It was resolved to add an @image rule for arbitrary image manipulations including transformations. (See my example in the previous comment.)

Does that solve your use case or do you think we're missing something?

Sebastian

[xfq]

Yep, I think it solves my use case. Thank you!