我对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/

08-27 12:34