skewX（）CSS3属性

css
css3

2012-01-24 52 views 6 likes

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

问题是，在扭曲div时，图像也是倾斜的。歪斜的图像看起来不太好。

我试过的一个解决方案是将skewX值重置为0deg在图像上，但无济于事。在小提琴中，我没有包括手风琴，因为这对解决方案来说不是必需的。

<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; 
}

来源

2012-01-24 kyranjamie

'skewX（）'是一个函数。该属性是“变换”。 – BoltClock

回答

您可以应用在img倒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/

来源

2012-01-24 10:14:15 thirtydot

非常感谢，这解决了双偏移问题。可悲的是，尽管.click（）jQuery事件改变了我的手风琴中的图像排序，但当扭转偏斜时，它还会恢复可点击区域，从而击败点。 – kyranjamie

@sarspazam：你有没有纠结的图像版本？通过CSS转换完成所有偏移可能会更好。 –

我可以做，但我不认为这是最好的解决方案。在某些浏览器中呈现倾斜图像是可怕的。 – kyranjamie

skewX（）CSS3属性

回答

相关问题