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

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

1 个答案: