javascript - 使用 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');稍后，但它似乎并不适用。

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 here