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

Question

我需要什么：

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

我拥有的：

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

术语混淆：

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

失望：

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

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

跨浏览器：

跨浏览器支持至关重要。出于这个原因，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%;
}