如何在Javascript或CSS中旋转图像

我正在创建一个简单的游戏

我想使用jQUERY旋转关节，使其移动。我正在使用.animate（）来设置CSS属性的动画，但如果也可以使用Javscript，我可以制作自己的自定义代码

更切题

如何在CSS或Javascript中旋转图像？我更喜欢CSS，但Javascript也不错

如果这是不可能的（我很确定是的，但我还没有放弃），有没有其他可能的方法来做我想做的事情，而不制作一堆单独的图像，每个图像以不同的方式旋转。 或者有人能给我举一个做类似事情的网站的例子吗

---

编辑：我需要一个CSS属性（no-something:rotation（500deg）；），可以使用，因为这些是我真正使用的唯一浏览器。

一些浏览器支持这一点：

---

Firefox和Webkit浏览器支持“transform”CSS属性（“-Webkit transform”，“-moz transform”）。这些可以做各种有趣的事情。有一个非常弱的IE工具，允许非常有限的旋转，所以它不是一个真正的选择，像一个游戏

---

几天前，我为另一个Stackoverflow问题制作了一个演示页面：

不是完整的答案，但如果有帮助，我在Safari中有一个有趣的小书签（在chrome中也可以使用），它会导致页面内容旋转：

javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());

我想看看示例用法可能会有所帮助。

您是否尝试过：

---

适用于所有现代浏览器，包括IE>=6

不理想，但您可以为图像的每个旋转状态创建单独的图像文件，然后使用JavaScript更改

或CSS更改

背景图像：url（'XXX'）一旦加载了图像（你甚至可以用JS预加载它们），它们之间的动画应该非常快
 

如上图所示
1） 是-90度还是270度旋转
2） 是+90度旋转和
3） 是180度旋转

注：-包含蓝色正方形的象限是使用img标记显示时在web浏览器中的原始图像位置。这是开发人员在web浏览器中唯一可见的部分。当图像从左上角点旋转时，它将切换到不可见象限。因此，在css中使用translateX和translateY属性以及rotate属性将图像从不可见象限拖动到可见象限以在web浏览器上显示是非常重要的。有关更多信息，请参阅

相同的css如下所示

.image_rotate_270 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg)  translateX(-100%);
}


.image_rotate_90 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg)  translateY(-100%);
}


.image_rotate_180 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -ms-transform: rotate(180deg)  translateX(-100%) translateY(-100%);
}

现在在img标记的class属性中使用这个类名

<img src="xyz.jpg" id="image" class="image_rotate_90"/>



对于-90和+90的旋转，有时需要使用屏幕分辨率或原始图像分辨率更改其高度和宽度，以便图像保持其原始形状。加载图像后，在body标记内使用javascript执行此操作

<script>
    document.getElementById("image").width = screen.height;
    document.getElementById("image").height = screen.width;
</script>


document.getElementById（“图像”）.width=screen.height；
document.getElementById（“图像”）.height=screen.width；

假设原始图像的分辨率为640 X 480。i、 e.宽度=480，高度=640。因此，旋转图像时，它将成为分辨率为480 X 640的图像。所以要保持它原来的形状。加载图像后，可以在body标记下执行以下操作

<script>
    document.getElementById("image").width = 480px;
    document.getElementById("image").height = 640px;
</script>


document.getElementById（“图像”）.width=480px；
document.getElementById（“图像”）.height=640px；