JQuery rotates (rotates gradually) background image

Question

What I need:

Animated rotation (rotation) of the background image by an arbitrary number of degrees. Ideally, an animation is activated when another animation is called back.

What I have:

A container container with a background image containing additional divs (only an image is required to rotate, not the contents of a div or div).

Terminological Confusion:

In jQuery, the word "rotate" seems to mean circular exchange . My definition of “rotate” for the purpose of this flow refers to a two-dimensional flip in the degree of an object using the z plane as the central axis . Terminological overlap makes it difficult to research this issue using search engines.

Disappointment:

I was expecting something basic, like animated rotation (rotation) of an image or background image, to be a standard requirement and therefore jQuery default functionality. Instead, the best I can find is the jquery-rotate plugin, which does not highlight the obvious support for background images and what it supports is not even cross-browser compatible.

EDIT: The jQuery-rotate plugin supports IE6 + and other old browsers, returning to CANVAS and VML for standard objects, although I'm not sure about the images yet.

Cross browser:

Cross browser support is required. For this reason, CSS alternatives or hybrid jQuery / CSS alternatives do not meet my requirements. Minimum IE6 + support allowed.

My question is:

I don’t notice obvious solutions or jQuery is not able to revive the rotation (revolution) of the background image, despite the fact that it is able to achieve much more complex skills?

Answer 1

Kinetic.js with HTML canvas offers some simple and effective rotation functions that you can try, where you can set the degree of rotation you want. I used it to animate a ball at www.threeblokesfromchina.com, you can also google for tutorials

Answer 2

First of all, there is no real way of animating background-image - however, if you achieve this, you will need to create a separate element (more on this in footnote # 1).

Secondly, rotation is not a simple concept, but in a modern world compatible with standards, it is possible to use a combination of CSS3 transform and transition s.

Thirdly, IE6 will need to use proprietary custom technologies to emulate this. VML is one option, but Microsoft has actually implemented a lot of CSS3 using its own filter . Transitions are not possible, but you can use Javascript to dynamically change the filter and transform properties over time.

However, this requires a lot of half-filling, and your best solution, developed elsewhere, is your best bet. My recommendation would be to use excellent CSS Sandpaper .

1. Creating a separate DOM element for image placement

Something like this should work (I used <b></b> for lack of semantic implication):

 <div class="container"> <b class="background"></b> <div class="foreground"> [content/] <div> </div> .container, .foreground { position: relative; } .background { background: yourImage.jpg; display: block; position: absolute; width: 100%; height: 100%; }