使用JS / Jquery翻转图像

我想要翻转图像。 我已经使用css工作了：

-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; 

我希望将其应用于图像，但不确定格式。

我尝试过： var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";

然后： $("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear'); 稍后，但它似乎不适用。

Answer 1

你想尝试这样的事吗？

 $('#image').mouseover(function(){ $(this).addClass('flipped'); }).mouseleave(function(){ $(this).removeClass('flipped'); }); 

css：

 .flipped { transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -khtml-transform: scale(-1, 1); -ms-transform: scale(-1, 1); } 

jsFiddle在这里

Answer 2

我只是使用一个类，如下所示：

 .flipped { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } 

然后只需交换class级：

 $("#chicken").delay(2000).fadeOut(1, function() { $(this).addClass('flipped').show() .animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear'); }); 

小提琴

Answer 3

我不完全确定我明白你在寻找什么。

我想也许可以在没有任何JavaScript的情况下完成它？ 如果你想沿着X轴翻转一些动画？

在hover上翻转图像

JSFiddle：图片翻​​转：hover

对于这个演示，我不得不将图像HTML放到包装器

，因为否则:hover和scale()会以时髦的方式相互冲突。 您将理解是否删除了包装器

。

HTML

CSS：

 .flippy>img { /**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1); transform:scale(1,1); /**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease; transition:all 600ms ease; } .flippy:hover>img { /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1); transform:scale(-1,1); } 

如果你需要用JavaScript来控制它，那么应该很容易将:hover替换为另一个类，例如.flipped ，然后在JS中.flipped执行以激活它的打开和关闭状态。

//追。

在属性上翻转图像（基于点击的演示）

jsFiddle：图像翻转属性

在此演示中，当设置了flipped属性时，图像将flipped 。

JavaScript的：

 // Toggles the 'flipped' attribute on the  tag. $('.flippy').click(function(){ if ($(this).attr('flipped')) $(this).removeAttr('flipped'); else $(this).attr('flipped','flipped'); }); 

CSS：

 /* vendor-prefixes have been removed in this example */ /* We just change the scale based on the flipped attribute */ .flippy { transform:scale(1,1); transition:all 600ms ease; } .flippy[flipped] { transform:scale(-1,1); } 

HTML： – 正如您所看到的，我们不再需要此示例的

包装器，如下所示：hover冲突不再是问题。

//追。

Answer 4