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

Question

我需要：

一个背景图片按任意角度旋转的动画效果。最好是在另一个动画的回调函数中触发。

现有的条件：

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

术语混淆：

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

失望：

我期望像图像或背景图像的旋转（革命）这样基本的功能是jQuery的标准要求，因此是默认功能。相反，我找到的最好的东西是jquery-rotate插件，它并没有明显支持背景图像，并且它所支持的也不是跨浏览器友好的。

编辑：jquery-rotate插件通过对标准对象进行CANVAS和VML的回退来支持IE6+和其他旧版浏览器，但我还不确定其对背景图像的支持如何。

跨浏览器：

跨浏览器支持是必不可少的。出于这个原因，CSS替代方案或jQuery/CSS混合替代方案将无法满足我的要求。最低支持IE6+。

我的问题：

我是否忽略了明显的解决方案，还是jQuery不能旋转（革命）背景图像，尽管它能够实现更复杂的功能？

- Dominor Novus

---

如果需要的话，我可以采用相对定位图像元素的方式，而不是增加背景图像。 - Dominor Novus

Answer 1

首先，没有真正的方法可以对background-image进行动画处理 - 无论您如何实现，都需要创建一个单独的元素（有关此内容，请参见脚注＃1）。

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

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

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

- Barney

Answer 2

Kinetic.js与HTML画布结合提供了一些简单而有效的旋转功能，您可以尝试设置所需的旋转角度 --- 我在www.threeblokesfromchina.com上使用它来制作动画球，您也可以通过谷歌搜索教程。

- IanO.S.

---

感谢IanO.S.的推荐，但据我所知，IE9+对HTML画布的支持远远超出了我所需的最低跨浏览器支持（IE6+）。此外，HTML画布似乎专门用于绘图，而不是我需要的旋转图像元素（更准确地说，是背景图像）。 - Dominor Novus