使用JS/JQuery翻转图像

Question

我希望翻转一张图片。我已经使用以下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'); 但是似乎并没有生效。请帮我检查一下。

- Glenn

---

你正在向 css 函数 传递一个具有两个属性 left 和 top 的 JavaScript 对象。其中 'top' 是一个大字符串 "2370px-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'"。 - Paul Hoenecke

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

- marbor3

---

不完全是，但我认为.addClass和.removeClass肯定会更好地实现我的目标。如果我使用.removeClass而它没有该类，它会返回错误还是忽略它，你知道吗？ - Glenn

@Splatter 这将被忽略，jQuery的removeClass方法使用replace方法，将给定的类名替换为“”，因此它什么也不会做。 - marbor3

这个和adeneo的都对我所需的内容正确。因为这个先被提供，所以标记它是正确的。抱歉adeneo（但我给了你+1！） - Glenn

Answer 2

我会使用类来实现，如下所示：

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

然后只需交换类：

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

FIDDLE

- adeneo

Answer 3

我不完全确定我理解你所寻找的内容。

我想也许可以完全不用JavaScript来完成？如果你想要在X轴上翻转，带有一些动画效果？

悬停时翻转图片

JSFiddle：悬停时图像翻转

对于这个演示，我不得不将图像HTML放入一个包装器<div>中，否则:hover和scale()的更改会以奇怪的方式相互冲突。如果您删除包装器<div>，您将会明白。

HTML

<div class="flippy">
    <img src="http://lorempixel.com/200/200/"/>
</div>

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中根据需要激活其翻转状态即可。// Chase.

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

jsFiddle：属性上的图像翻转

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

JavaScript：

// Toggles the 'flipped' attribute on the <img> 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：<img class="flippy" src="http://lorempixel.com/200/200/"> -- 如您所见，对于这个例子，我们不再需要<div>包装器，因为:hover冲突不再是问题。

// Chase.

- ChaseMoskal

---

我不想使用hover。这将在动画期间发生。 - Glenn

@Splatter -- 我在我的回答中添加了另一个部分和 jsFiddle。这个第二个演示会根据具有 'flipped' 属性的存在与否来翻转或取消翻转图像，该属性可以很容易地使用 jQuery 添加或删除。 - ChaseMoskal

@Splatter：甚至没有一个+1吗？拜托了！我可不是为这个付费的XD - ChaseMoskal

Answer 4

<style type="text/css">
    .transform-image {     
        -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
</style>
<script type="text/javascript">
  $("#chicken").hover(function(){
           $(this).addClass("transform-image") },   
     function () {
           $(this).removeClass("transform-image");
         };
})
</script>

- Aaron Jones