0

css/jquery を使用して画像を水平方向に反転しようとしていますが、画像の回転が行われたときに水平方向に反転することがわかりません。

CSS:

.horizontal-flip {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

html:

<img class="product-img horizontal-flip" src="/x.jpg" alt="products name">

jQuery:

$(".outfits").on('click', '.outfit .rotate-horizontal', function() {                  
    $(".product-img").toggleClass("horizontal-flip");
});

上記は正常に動作します。

画像を回転させると、 

$(".product-img").rotate(90); //with jQuery rotate-plugin

画像の html は次のようになります: (Firebug の場合)

<img class="product-img horizontal-flip" src="/x.jpg" alt="products name" style="transform: rotate(90deg);">

しかし、インラインスタイルの変換:rotate(90deg)が使用され、水平フリップは無視されているようです。

回転した画像（90度まで）を反転させたい。その解決策は何ですか？

垂直方向に反転する場合、画像の現在の設定角度から画像を 180 度回転させることで問題を解決しました: (ただし、水平方向に反転する場合は、単に回転するだけではありません)。

jQuery (および jQuery Rotate プラグイン)

var img = $(".product-img");
var angle = img.getRotateAngle();
var newAngle = 180 - angle;
img.rotate(newAngle);
4

1 に答える 1

1

そのようにクラスを設定し、

img.flip-and-rotate{
    transform: rotate(90deg) scaleX(-1);
}

または、可変回転が必要だと思うので、同じ目的を達成する独自の js 関数を作成することもできます。ここでの問題は、回転を適用すると、ミラーである前の変換が上書きされることです。（私はjqueryに慣れていません。これはおそらく最善の方法ではありませんが、これは単なる例です）

function rotate_and_flip(prop,x){
     $(prop).css('transform', 'rotate('+ x +'deg) scaleX(-1)');
}
于 2013-06-26T14:01:26.123 に答える