Question

我正在制作一款简单的游戏。

我想使用jQUERY旋转关节使其移动。我使用.animate（http://api.jquery.com/animate/）来动画CSS属性，但如果也可以使用Javscript，我可以创建自己的自定义代码。

更多重点

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

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

编辑：我需要1个CSS属性（no -something：rotation（500deg）;），它适用于FireFox，Safari和Chrome，因为这些是我真正工作的唯一浏览器用。

Answer 1

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

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

Answer 2

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

注意： - 当使用img标签显示时，包含蓝色方块的象限是Web浏览器中的原始图像位置。这是Web浏览器中开发人员唯一可见的部分。在图像从其左上角旋转时，它将切换到不可见的象限。因此，使用translateX和translateY属性以及css中的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 tag的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>

Answer 3

有些浏览器支持此功能：

Rotate That Image with CSS

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

如何在Javascript或CSS中旋转图像

6 个答案: