skewX（）CSS3屬性

Question

我有一個實用的CSS3 skewX屬性。我用jQuery寫了一個簡單的圖像類手風琴腳本。作爲設計的一部分，圖像傾斜（已經不在CSS中），爲了使正確的區域可點擊，包含的div需要被傾斜。

問題是，在扭曲div時，圖像也是傾斜的。歪斜的圖像看起來不太好。

我試過的一個解決方案是將skewX值重置爲0deg在圖像上，但無濟於事。在小提琴中，我沒有包括手風琴，因爲這對解決方案來說不是必需的。

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

Answer 1

您可以應用在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/