css - skewX()CSS3属性

我对css3 skewx属性有实际的用途。我用jquery编写了一个类似手风琴的简单图像脚本。作为设计的一部分，图片是倾斜的（已经是，不是在css中），为了使正确的区域可以点击，包含的div需要倾斜。
问题是，在倾斜div时，图像也会倾斜。扭曲扭曲的图像看起来不太好。
我尝试过的一种解决方案是将图像上的skewx值重置为0度，但没有成功。在小提琴里，我没有包括手风琴，因为这不是解决问题的必要方法。
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;
}

最佳答案

您可以在skewX上应用反向img：

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/