3

我正在寻找翻转图像。我已经让 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'); 稍后，但它似乎并不适用。

4

4 回答 4

9

你想这样做吗？

$('#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在这里

于 2013-02-04T19:46:56.167 回答
3

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

.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');
});

小提琴

于 2013-02-04T19:49:37.417 回答
2

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

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

悬停时翻转图像

JSFiddle：图像翻转：悬停

对于这个演示，我必须将图像 HTML 放入一个 wrapper<div>中，因为否则这些:hover变化scale()会以时髦的方式相互冲突。如果您删除 wrapper ，您就会明白<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：属性上的图像翻转

在此演示中，当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 冲突不再是问题。

//追赶。

于 2013-02-04T20:10:20.857 回答
0 
<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>
于 2013-02-04T19:51:48.253 回答