Re: [csswg-drafts] [css-backgrounds-4] Transformation of background images

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

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2364#issuecomment-401568161 using your GitHub account

Received on Saturday, 30 June 2018 21:46:16 UTC