如何在 Javascript 或 CSS 中旋转图像答案

【问题标题】：How do I rotate an image in Javascript or CSS如何在 Javascript 或 CSS 中旋转图像
【发布时间】：2010-03-02 23:09:18
【问题描述】：

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

我想使用 jQUERY 来旋转关节使其移动。我正在使用 .animate (http://api.jquery.com/animate/) 为 CSS 属性设置动画，但如果也可以使用 Javscript，我可以制作自己的自定义代码。

更多要点

如何在 CSS 或 Javascript 中旋转图像？我更喜欢 CSS，但 Javascript 也很好。

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

编辑：我需要 1 个与 FireFox、Safari 和 Chrome 一起使用的 CSS 属性（无 -something:rotation(500deg);），因为这些是我真正使用的唯一浏览器。

【问题讨论】：

标签： javascript jquery html image

【解决方案1】：

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

这是我几天前为另一个 Stackoverflow 问题制作的演示页面：http://gutfullofbeer.net/compass.html

【讨论】：

【解决方案2】：

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

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

相同的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>

假设您的原始图像的分辨率为 640 X 480。即宽度 = 480 和高度 = 640。因此，当您旋转图像时，它会变成分辨率为 480 X 640 的图像。因此要保留其原始形状。加载图片后，您可以在 body 标签下执行以下操作。

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

【讨论】：

【解决方案3】：

一些浏览器支持这个：

Rotate That Image with CSS

【讨论】：

【解决方案4】：

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

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

我认为查看示例用法可能会有所帮助。

【讨论】：

【解决方案5】：

不理想，但您可以为图像的每个旋转状态制作单独的图像文件，然后使用 JavaScript 更改 <img src="XXX" /> 或 CSS 更改 background-image: url('XXX'); 一旦图像加载（您甚至可以预先加载它们JS），它们之间的动画应该非常快。

【讨论】：

【解决方案6】：

你有没有试过：http://jqueryrotate.com/??

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

【讨论】：