使用JS / Jquery翻转图像 [英] Flipping an image with JS/Jquery

问题描述

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

I am looking to flip an image. I have gotten the css to work using:

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

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

I am looking to apply this to an image but am unsure of the formatting.

我试过：
var flip = - moz-transform：scaleX（-1）， - o-transform：scaleX（-1）， -webkit-transform：scaleX（-1），transform：scaleX（-1），filter：FlipH，-ms-filter：'FlipH';

然后：
$（＃chicken）。延迟（scrolllen）.fadeOut（0）.css（{left：2600 +px，top：2370 +px+ flip}）。fadeIn（0）.animate（{left：1600 +px，top：2370 +px}，5000，'linear'）; $ b稍后$ b，但它似乎不适用。

And then: $("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear'); at a later point, but it doesn't seem to apply.

推荐答案

你是否正在尝试这样的事情？

Are you trying do to something like this?

$('#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 here

jsFiddle here

这篇关于使用JS / Jquery翻转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！