jQuery旋转(按度旋转)背景图像

Question

我需要的是：

以任意程度旋转背景图像的动画旋转(旋转)。理想情况下，动画是在另一个动画的回调中激活的。

我所拥有的：

包含附加div的背景图像的容器div (只需要旋转图像，而不需要div或div内容)。

术语混淆：

在jQuery中，“旋转”一词似乎意味着循环交换。我对“旋转”的定义，就这个线程而言，指的是以z平面作为中心轴的物体的二维旋转。术语的重叠使得使用搜索引擎来研究这一问题变得困难。

失望：

我希望像图像或背景图像的动画旋转(革命)这样基本的东西是标准要求，因此也是jQuery的默认功能。相反，我能找到的最好的是一个jquery旋转插件，它没有突出显示对背景图像的明显支持，而且它支持什么，甚至不支持跨浏览器。

编辑:jQuery旋转插件支持IE6+和其他较旧的浏览器，因为标准对象返回到画布和VML，不过我还不确定对背景图像的支持是什么。

跨浏览器：

跨浏览器支持是必不可少的。因此，CSS替代方案或jQuery/CSS混合方案将无法满足我的要求。最低限度的IE6+支持是可以接受的。

我的问题是：

我是忽略了明显的解决方案，还是jQuery不能动画的旋转(革命)的背景图像，尽管能够实现更复杂的壮举？

Answer 1

HTML提供了一些简单而有效的旋转功能，您可以尝试设置您想要的旋转度？？我用它在www.threeblokesfromchina.com上对球进行动画化，您也可以在google上搜索教程。

Answer 2

首先，没有真正的background-image动画方法--无论您如何做到这一点，您都需要创建一个单独的元素(脚注1中将对此进行详细介绍)。

其次，旋转不是一个直截了当的概念，但在符合标准的尖端世界中，使用CSS3 transforms和transitions是可能的。

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

尽管如此，所有这些都需要大量的填充和一个定制的开箱即用的解决方案是你最好的选择。我的建议是使用优秀的CSS砂纸。

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%;
}