Question

Is it possible to add rotation to a repeated background-image texture? – I don’t mean to rotate the element itself but the element’s background-image?

I was wondering if this is possible with CSS3?

This would mainly be useful for animation as you could then animate the rotation of the background-image through jQuery.

Answer 1

I don’t think background-image-rotate exists yet in any browser. However, you may be able to achieve the affect with an animated gif. Or perhaps by writing jQuery to do the following…

• Create a series of images that represent the animation (e.g. a north, north east, east, south east, south, south west, west and north west version of the image)
• Have a jQuery event timer kick off every n milliseconds and replace the background image

You can see an animated gif working as a repeated background image here…

http://acarna.com/test-animation.php

View the source and grab /images/animation.gif to see how it works.

NOTE: A little time spent with jQuery will deliver a smoother result than is possible with an animated gif. Especially if you’d like visitors to your site to be able to interact with the animation.