旋轉設置內聯時的水平翻轉

我試圖用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如下：（螢火蟲）

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

但隨後的直列樣式轉換：使用旋轉（90deg），水平翻轉似乎被忽略。

我想旋轉圖像（90deg）翻轉。有什麼解決方案？

當談到垂直翻轉我解決了這個問題，通過旋轉從圖像的當前設置角度圖像180deg：（但水平翻轉時，它不只是旋轉）

的jQuery（和jQuery旋轉插件）

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

來源

2013-06-26 bestprogrammerintheworld

成立專班正因爲如此，

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

，或者你可以創建自己的JS FUNC因爲我想你想要有一個可變的旋轉。這裏的問題是，當你應用旋轉時，它會破壞之前的鏡像變換。（我不習慣jquery，這很可能不是最好的方法來完成它，但它只是一個例子）

function rotate_and_flip(prop,x){ 
    $(prop).css('transform', 'rotate('+ x +'deg) scaleX(-1)'); 
}

來源

2013-06-26 14:01:26 Don

非常感謝！現在我知道HOWTO繼續:-)我嘗試了一個單獨的旋轉和單獨的翻轉，當然這是行不通的，因爲在兩種情況下都使用transform-property。 – bestprogrammerintheworld

旋轉設置內聯時的水平翻轉

回答

相關問題