Re: [csswg-drafts] [css-images] @image rule for manipulating images (#6807)

apologies for the confusion I think that some of the example ideas I've posted might fall better under something like `element()`. 

So let me give this another try:

![image](https://user-images.githubusercontent.com/1286791/173254572-3fc58a43-1e17-4547-b83f-971bcb02ec7c.png)

We have one background image that is then rotated in different ways to create slightly visually different backgrounds for the different links.

```
@image-manipulation rotate-x-y {
  transform: rotate(180deg);
}
@image-manipulation rotate-x {
  transform: rotateX(180deg);
}
@image-manipulation rotate-y {
  transform: rotateY(180deg);
}

a {background-image: url(yellow.webp);}

a:nth-of-type(2) { background-image: url(yellow.webp), rotate-x-y; }
a:nth-of-type(3) { background-image: url(yellow.webp), rotate-x; }
a:nth-of-type(4) { background-image: url(yellow.webp), rotate-y; }
```

in this case having to repeat the `background-image: url(yellow.webp),` bit seems a bit clunky. Maybe there a way to do something more like `manipulation-name` taking a cue from the already existing `animation-name` property?

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


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

Received on Sunday, 12 June 2022 21:53:46 UTC