4

What I need:

An animated rotation (revolution) of a background image by an arbitrary amount of degrees. Ideally the animation is activated on the call-back of another animation.

What I have:

A container div with a background image that contains additional divs (only the image is required to rotate and not the div or div content).

Terminological confusion:

In jQuery, the word "rotate" seems to mean cyclically interchange. My definition of "rotate", for the purposes of this thread, refers to the two dimensional revolution by degrees of an object using the z-plane as a central axis. The terminological overlap makes it difficult to research this matter using search engines.

Disappointment:

I expected something as basic as the animated rotation (revolution) of an image or background image to be a standard requirement and therefore a default functionality of jQuery. Instead, the best I can find is a jquery-rotate plugin that doesn't highlight obvious support for background-images and what it does support, isn't even cross-browser friendly.

EDIT: The jquery-rotate plugin supports IE6+ and other older browsers by falling back to CANVAS and VML for standard objects though I'm as of yet uncertain as to what the support is for background-images.

Cross-browser:

Cross-browser support is essential. For this reason, CSS alternatives or jQuery/CSS hybrid alternatives will not meet my requirements. A minimum of IE6+ support is acceptable.

My question:

Am I overlooking obvious solutions or is jQuery not able to animate the rotation (revolution) of a background image despite being able to achieve far more complex feats?

4

2 回答 2

0

首先，没有真正的方法来为 a 设置动画background-image——无论你如何实现这一点，你都需要创建一个单独的元素（更多内容请参见脚注 #1）。

其次，旋转不是一个简单的概念，但在符合尖端标准的世界中，可以使用 CSS3transform和transitions 的组合。

第三，IE6 将需要使用专有的非标准技术来模拟这一点。VML 是一种选择，但微软实际上使用专有的过滤器属性实现了很多 CSS3 。转换是不可能的，但您可以使用 Javascript随时间动态修改filter和属性。transform

尽管如此，所有这些都需要大量的 polyfill，而在其他地方开发的定制开箱即用解决方案是您最好的选择。我的建议是使用优秀的CSS Sandpaper。

1. 创建一个单独的 DOM 元素来包含图像

像这样的东西应该可以工作（我已经使用<b></b>它缺乏语义含义）：

<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%;
}
于 2013-01-31T10:39:51.670 回答
0

带有 HTML 画布的 Kinetic.js 提供了一些简单有效的旋转功能，您可以尝试在其中设置所需的旋转度 --- 我用它在 www.threeblokesfromchina.com 上为球设置动画，您也可以在谷歌上搜索教程

于 2013-01-31T10:02:44.840 回答