在圆形滑块中为图像赋予角度

Question

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

使用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个'图像将不会显示正确的对齐，因为之前所有的都将进入同一个类，怎么做？

Answer 1

不幸的是，透视似乎还没有被支持（至少在测试它的chrome中）。

但你可以使用其他转换，只需使用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/