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

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

Answer 3

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

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

在悬停时翻转图像

<强> JSFiddle: Image Flip on :hover

对于此演示，我必须将图片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中随意执行以激活它的翻转状态和关闭。

//大通。

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

<强> jsFiddle: Image Flip on Attribute

在此演示中，当设置了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>包装器，因为：悬停冲突不再是问题。

//大通。

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>

使用JS / Jquery翻转图像

4 个答案:

在悬停时翻转图像

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