jQuery旋转（按度数旋转）背景图像

Question

我需要的：

背景图像的动画旋转（旋转）任意度数。 理想情况下，动画在另一个动画的回调中被激活。

是）我有的：

带有背景图像的容器div，其中包含其他div（只需要旋转图像而不是div或div内容）。

术语混淆：

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

失望：

我期望像图像或背景图像的动画旋转（革命）那样基本的东西是标准要求，因此是jQuery的默认功能。 相反，我能找到的最好的是一个jquery-rotate插件，它没有强调对背景图像的明显支持以及它支持的内容，甚至不是跨浏览器友好的。

编辑： jquery-rotate插件通过回退到标准对象的CANVAS和VML来支持IE6 +和其他旧版浏览器，尽管我还不确定背景图像的支持是什么。

跨浏览器：

跨浏览器支持至关重要。 出于这个原因，CSS替代品或jQuery / CSS混合替代品将无法满足我的要求。 最低IE6 +支持是可以接受的。

我的问题：

我是否忽略了明显的解决方案，或者jQuery无法为背景图像的旋转（革命）制作动画，尽管能够实现更复杂的功能？

Answer 1

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

Answer 2

首先，没有真正的动画background-image - 但是你实现了这一点，你需要创建一个单独的元素（脚注＃1中有更多内容）。

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

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

尽管如此，所有这些都需要大量的填充，并且在其他地方开发的定制开箱即用解决方案是您最好的选择。 我的建议是使用优秀的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%;
}