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：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：属性の画像反転

このデモでは、isに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 に答える