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);">

但是随后使用了内联式变换：旋转（90度）并且水平翻转似乎被忽略了。

我想要翻转旋转的图像（到 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 回答