如何在 jquery 中旋转图像？

Posted 2023-05-09

【中文标题】如何在 jquery 中旋转图像？

【英文标题】：How to rotate image in jquery?

【发布时间】：2013-09-03 21:11:34

【问题描述】：

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

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

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

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

【问题讨论】：

你在javascript中需要这个吗？你用过 CSS 转换吗？

你在谈论旋转。不是旋转。参考spritespin.ginie.eu

【参考方案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);
 );