有沒有辦法將jQuery UI圖標或Bootstrap圖標顛倒過來？

非常簡單的問題。我希望能夠垂直翻轉圖標。使用jQuery UI或Bootstrap圖標。有沒有辦法將jQuery UI圖標或Bootstrap圖標顛倒過來？

http://api.jqueryui.com/theming/icons/

http://getbootstrap.com/2.3.2/base-css.html#icons

例如，對於圖標「刷新」。將作爲「旋轉」順時針一個非常方便的或逆時針對圖像的觀看。有沒有辦法做到這一點，而不必獲得新的圖標？

說明：我不想旋轉圖像。我想採取一個非對稱的圖標和倒置它，所以我得到它的鏡像。

來源

2015-11-24 matrixugly

您可以在您要旋轉我創建了一個小提琴那些圖標應用CSS類，你可以在這裏查看

https://jsbin.com/rekuse/edit?html,css,js,output

.rotate-90 { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
}

如果你想翻轉圖標所以這

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

來源

2015-11-24 18:04:59

這只是旋轉圖像嗎？如果我有一個圖標是順時針旋轉的箭頭，它仍然指向順時針。目標是將順時針圖標變爲逆時針。 – matrixugly

我已經更新了小提琴，現在檢查它 –

Bam，就是這樣！謝謝！我編輯了你的小提琴，以顯示翻轉和常規圖標之間的區別。 https://jsbin.com/lobaciwoye/1/edit?html,css,js,output – matrixugly

爲了創建一個可重複的旋轉，你可以這樣做：

$(".rotate-left").click(function(){ 
 
    var $img = $(".Image"); 
 
    var rotation = ($img.prop("angle")||0)+90; 
 
    $img.prop("angle", rotation%360); 
 
    $img.css("transform","rotate("+$img.prop("angle")+"deg)") 
 
})

且同樣向右旋轉：

$(".rotate-right").click(function(){ 
 
    var $img = $(".Image"); 
 
    var rotation = ($img.prop("angle")||0)-90; 
 
    $img.prop("angle", rotation%360); 
 
    $img.css("transform","rotate("+$img.prop("angle")+"deg)") 
 
})

來源

2015-11-24 18:14:53 robneal

這只是旋轉的形象。這在圖像不對稱的情況下不起作用。 – matrixugly

要做到圖標旋轉，你可以簡單地將.rotated類附着的圖標。

.rotated {transform: rotateY(180deg);}

編輯：@matrixugly確實如此，旋轉Y反映了格，基本上是給你從它的對應一個counterlockwise圖標，反之亦然

來源

2015-11-24 18:33:02

查看問題。我不想旋轉，但要翻轉。 – matrixugly

是的，這是在Y軸上旋轉，這就像你在帖子中說的那樣給你一個鏡像。 http://jsfiddle.net/AtheistP3ace/L17950wk/ – AtheistP3ace

這是一個好主意，但如果圖標不對稱，則不起作用。例如逆時針旋轉180度的箭頭仍然指向逆時針方向。你的想法在圖標是對稱的假設下工作。:) – matrixugly

有沒有辦法將jQuery UI圖標或Bootstrap圖標顛倒過來？

回答

相關問題