I've set a CSS3 background gradient on an item, and I'd like to have it spin slowly. I'm just starting with CSS3 & HTML5 (Mind you, I've used CSS & HTML for 15 years, there's a lot of new stuff though). Is it possible to spin just the background, not the actual element?
(Removed link to page, as it no longer exists) It is a background gradient even though it's on the text's foreground, gotta love background-clip); I don't want the text to rotate but I do want the background to. Also, this only works in webkit browsers.
I'm willing to use whatever scripting gets it done - HTML5 canvas, CSS3 transforms, Javascript/jQuery, etc (although keeping it pure CSS3 would be great). I am trying to avoid using any images, however.
You can do this by animating the CSS property with JavaScript. Here is an example that uses a bit of jQuery to ease changing the CSS:
Demo: http://jsfiddle.net/HYDAj/2/
Basically, I use setInterval to change the gradient angle every 100ms. I couldn't get your specific gradient to work, and this example only works in WebKit browsers, but that will get you started.
I should also note that WebKit is alone in supporting `background-clip: text', so that is another reason this won't work in Firefox or IE.
In case you didn't care to use any jQuery, here is the pure JavaScript way: