倾斜X轴（skewX）CSS3属性

Question

我有一个实用的CSS3 skewX属性用途。我用jQuery编写了一个简单的图像手风琴脚本。为了使正确的区域可点击，图像已经被倾斜（不是在CSS中），包含的div需要被倾斜。

问题是，在倾斜div时，图像也被倾斜了。倾斜一个已经倾斜的图像看起来不好。

我尝试过的一个解决方案是将图像的skewX值重置为0deg，但没有成功。在这个fiddle中，我没有包括手风琴，因为这对解决方案没有必要。

http://jsfiddle.net/yM49N/2/

<div><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"></div>

div {
    -webkit-transform:skewX(200deg);
       -moz-transform:skewX(200deg);
         -o-transform:skewX(200deg);
        -ms-transform:skewX(200deg);
            transform:skewX(200deg);
    border:1px solid red;
}

- kyranjamie

---

skewX()是一个函数。属性为transform。 - BoltClock

Answer 1

您可以在标签上应用反向skewX效果：

img {
    -webkit-transform: skewX(-200deg);
       -moz-transform: skewX(-200deg);
         -o-transform: skewX(-200deg);
        -ms-transform: skewX(-200deg);
            transform: skewX(-200deg);
}

为了使 div 正确地包含图片，您还需要添加 overflow: hidden。 http://jsfiddle.net/thirtydot/yM49N/3/

- thirtydot

---

非常感谢，这解决了双重倾斜的问题。遗憾的是，尽管 .click() jQuery 事件改变了手风琴中图像的顺序，但当反转倾斜时，它也会恢复可点击区域，从而失去了意义。 - kyranjamie

@sarspazam：你有没有未倾斜的图像版本？最好通过CSS变换来完成所有倾斜。 - Paul D. Waite

我可以做，但是我不认为那是最好的解决方案。在某些浏览器中，呈现倾斜图像会很糟糕。 - kyranjamie

@sarspazam：你可不可以不要在（倾斜的）div上使用.click()，然后再找到“活动图像”（或其他内容）？我不太确定你在做什么，但这是个思路：http://jsfiddle.net/thirtydot/yM49N/4/。 - thirtydot