logo标签列表

如何在Javascript或CSS中旋转图像

javascriptjqueryhtmlimage
4
我正在创建一个简单的游戏。
我想使用jQUERY旋转关节使其移动。我正在使用.animate ( http://api.jquery.com/animate/ ) 来动画化CSS属性，但如果也可以使用Javscript，我可以制作自己的自定义代码。
更加简洁明了的问题：
如何在CSS或Javascript中旋转图像？我更喜欢CSS，但Javascript也可以。
如果不可能（我非常确定这是不可能的，但我还没有放弃），是否有任何其他可能的方法来实现我正在尝试做的事情，而不是制作一堆不同方向旋转的单独图像。
或者，任何人都可以给我提供一个类似的网站示例。

编辑：我需要一种CSS属性（不是-something: rotation(500deg);），它可以在FireFox、Safari和Chrome上工作，因为这些是我真正使用的唯一浏览器。

6个回答
5
火狐浏览器和Webkit浏览器支持“transform”CSS属性（“-webkit-transform”，“-moz-transform”）。 它们可以做各种有趣的事情。 IE有一个非常弱的工具，允许非常有限的旋转，因此对于像游戏这样的东西来说，它不是一个真正的选择。
以下是我为Stackoverflow上另一个问题制作的演示页面: http://gutfullofbeer.net/compass.html
3

enter image description here

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

注意：包含蓝色正方形的象限是在网页浏览器中用img标记显示时的原始图像位置。这是开发者在网页浏览器中唯一可见的部分。将图像从其左上角点旋转后，它将切换到不可见象限。因此，在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>
1
0

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

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

我想看到一个使用示例可能会有所帮助。

0
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接