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