内联设置旋转时的水平翻转

Question

我正在尝试使用 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);

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