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

Posted 2023-05-08

【中文标题】jQuery旋转（按度旋转）背景图像

【英文标题】：jQuery rotate (revolve by degrees) background image

【发布时间】：2013-01-15 07:47:12

【问题描述】：

我需要什么：

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

我有什么：

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

术语混淆：

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

失望：

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

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

跨浏览器：

跨浏览器支持是必不可少的。出于这个原因，CSS 替代品或 jQuery/CSS 混合替代品将不符合我的要求。至少支持 IE6+ 是可以接受的。

我的问题：

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

【问题讨论】：

我愿意相对定位图像元素，而不是在需要时增加背景图像。

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

首先，没有真正的方法可以为 background-image 设置动画 — 但是您需要创建一个单独的元素（在脚注 #1 中有更多内容）。

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

第三，IE6 将需要使用专有的非标准技术来模拟这一点。 VML 是一种选择，但微软实际上使用专有的filter 属性实现了很多 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%;