W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2018

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

From: Sebastian Zartner via GitHub <sysbot+gh@w3.org>
Date: Sat, 30 Jun 2018 21:46:13 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-401568161-1530395172-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.3.1 : Wednesday, 9 October 2019 08:16:45 UTC