如何在 jquery 中旋转图像？答案

【问题标题】：How to rotate image in jquery?如何在 jquery 中旋转图像？
【发布时间】：2013-09-03 21:11:34
【问题描述】：

你能告诉我如何旋转这样的图像：以人体为例：首先，我们把脸站在前面。当我点击图像时，我们的脸会在背面，而背面会在前面。我谷歌它发现有方法

("#image").rotate(180);

但在我的示例中不起作用我尝试了 360 但不行..:(

你能有任何男孩有正面和背面的图像，以便我也可以检查一下吗？

【问题讨论】：

你在javascript中需要这个吗？你用过 CSS 转换吗？
你在谈论旋转。不是旋转。参考spritespin.ginie.eu

标签： jquery jquery-mobile

【解决方案1】：

虽然为时已晚，

("#image").rotate(360);会将图像移动到其原始位置，因此尽管正确应用了旋转，但它看起来没有任何变化。

现在您的问题似乎与旋转不同，因为图像是在 2d 上绘制的，单张图像不可能实现您想要实现的目标。

取而代之的是 2 张图片，一张是正面的，另一张是背面的。使最初隐藏的图像之一。单击时只需切换图像的可见性。

【讨论】：

【解决方案2】：

这种类型的轮换是不可能的。

用户 2 个不同的图像，例如 imgFront、imgBack、现在在按钮单击事件上，您可以更改图像。

HTML

  <div>
     <img id="img1" href="imgFront.jpg" />
     <img id="img2" href="imgBack.jpg" class="hide" />
  </div>
  <button onclick="change"> Change </button>

JQuery

$('button').click(function(){
   if($('#img1').hasClass('hide')){
     $('#img1').addClass('hide');
     $('#img2').removeClass('hide');
   } else {
     $('#img2').addClass('hide');
     $('#img1').removeClass('hide');
   }
});

【讨论】：

【解决方案3】：

尝试对您的图像执行此操作。它会将您的图像翻转 45'。

     $(document).ready(function(){

        $("#image").rotate({angle:45});
 });

【讨论】：