jquery - 如何在 jquery 中旋转图像？

Question

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

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

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

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

Answer 1

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

用户 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');
   }
});

Answer 2

虽然为时已晚，

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

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

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

Answer 3

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

     $(document).ready(function(){

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