Rotating backgrounds?

CSS3 spec is so hard to read...

[Setek]

Does anybody know about whether we'll have control to rotate background images in CSS3?

If we can have multiple background-images per selector, this means we could achieve curved corners really easily (I know CSS3 will have rounded borders, but what if you want a.. flower.. on the top-left and bottom-right corners?)

Will we be able to have one cool corner image for the top-left, and then rotate it as a cool corner for the bottom-right, without having to cut two images?

If not, I think it would be cool.

Anybody know? :)

[edited by: Setek at 4:01 am (utc) on Dec. 21, 2006]

[alias]

take a look here:

W3.ORG CSS3 Latest Revision, Backgrounds and Borders [w3.org]

so no, you won't be able to rotate background images. anyway, you can achieve anything you want using only one image, without too much fuss with the cutting, and just clipping that image properly.

[Fotiman]

Right, to expand on what alias was saying, suppose you have an 4px x 4px image like this:

+----+ 
¦ .. ¦ 
¦ oo ¦ 
¦ xx ¦ 
¦ ¦¦ ¦ 
+----+ 

Now suppose you want another image that looks like this:

+----+ 
¦ ¦¦ ¦ 
¦ xx ¦ 
¦ oo ¦ 
¦ .. ¦ 
+----+ 

This is the same as the top image but rotated 180 degrees. One of these images might go in along the top, and the other along the bottom. But rather than having 2 separate files, each of which requires a trip to the server to retreive, you could combine them into a single image like so:

+----+ 
¦ .. ¦ 
¦ oo ¦ 
¦ xx ¦ 
¦ ¦¦ ¦ 
¦ ¦¦ ¦ 
¦ xx ¦ 
¦ oo ¦ 
¦ .. ¦ 
+----+ 

I've now created a 4x8 px image, with the top 4x4 px representing one image, and the bottom 4x4 px representing the other. Now you just adjust the background-position to display either the top 4 px or the bottom 4 px depending on where it's being used, and voila!

Not as nice as being able to just rotate an image with CSS, but still pretty neat.

[edited by: Fotiman at 3:52 pm (utc) on Dec. 21, 2006]