为圆形滑块中的图像给出角度

我正在制作圆形图像滑块。当用户点击任何图像时，它会滑入中心。在左边想要在课堂上添加的图像给出一些角度，我想在不同的课程中添加右侧图像以给出不同的角度。为圆形滑块中的图像给出角度

的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

为圆形滑块中的图像给出角度

回答

相关问题