爲圓形滑塊中的圖像給出角度

我正在製作圓形圖像滑塊。當用戶點擊任何圖像時，它會滑入中心。在左邊想要在課堂上添加的圖像給出一些角度，我想在不同的課程中添加右側圖像以給出不同的角度。爲圓形滑塊中的圖像給出角度

的Javascript：

$(document).on('click', 'img', function() { 
    var t=$(this); 
    t.prevAll().removeClass('t2').addClass('t1'); 
    t.nextAll().removeClass('t1').addClass('t2'); 
}

CSS：

.t1 
{ 
    transform: skewX(5deg) skewY(175deg); /* W3C */ 
    -webkit-transform: skewX(5deg) skewY(175deg); /* Safari & Chrome */ 
    -moz-transform: skewX(5deg) skewY(160deg); /* Firefox */ 
    -ms-transform: skewX(5deg) skewY(175deg); /* Internet Explorer */ 
    -o-transform: skewX(5deg) skewY(175deg); /* Opera */ 
} 

.t2 
{ 
    transform: skewX(-5deg) skewY(15deg); /* W3C */ 
    -webkit-transform: skewX(-5deg) skewY(10deg); /* Safari & Chrome */ 
    -moz-transform: skewX(-5deg) skewY(5deg); /* Firefox */ 
    -ms-transform: skewX(-5deg) skewY(10deg); /* Internet Explorer */ 
    -o-tran 
}

在圖像我給角的單擊事件，但在最後的 '12' 的圖像的點擊將不會顯示正確的alignement因爲以前所有人都會在同一個班上，如何去做？

enter image description here

來源

2013-05-28 anam

請複製您的問題jsbin.com。 – Arpit

在jsfiddle和斌它不工作，因爲它有這麼多的文件 – anam

我們需要看到更多的代碼比這個，以幫助雖然.. – sirmdawg

不幸的是，透視似乎沒有（在那裏我測試了它至少在鉻）尚不支持。

但是你可以用其他的轉換，只需使用CSS屬性transform（或前綴的）：

img { 
    -webkit-transform: skew(-10deg, 5deg); 
    -moz-transform: skew(-10deg, 5deg); 
    -o-transform: skew(-10deg, 5deg); 
    -ms-transform: skew(-10deg, 5deg); 
}

試試下面這個例子（在Chrome測試）：http://jsfiddle.net/uynXh/5/

來源

2013-05-28 14:02:15

爲圓形滑塊中的圖像給出角度

回答

相關問題