0

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

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 个”图像时将不会显示正确的对齐方式，因为以前的所有图像都将进入同一类，该怎么做？

在此处输入图像描述

4

1 回答 1

0

不幸的是，似乎还不支持透视（至少在我测试它的 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/

于 2013-05-28T14:02:15.157 回答