Add rotation to repeated background-image texture CSS3
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.
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...
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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here