skewX() Propiedad CSS3

Question

Tengo un uso práctico para la propiedad skewX de CSS3. He escrito una imagen sencilla de script accordian con jQuery. Las imágenes están sesgadas (ya no están en CSS) como parte del diseño y para poder hacer clic en las áreas correctas, los divs que los contienen deben estar sesgados.

El problema es que al sesgar el div, la imagen también está sesgada. Al sesgar una imagen torcida no se ve bien.

Una solución que he intentado es restablecer el valor skewX a 0deg en la imagen, pero fue en vano. En el violín, no he incluido el acordeón ya que esto no es necesario para la solución.

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

puede aplicar un skewX invertida en img:

img { 
    -webkit-transform: skewX(-200deg); 
     -moz-transform: skewX(-200deg); 
     -o-transform: skewX(-200deg); 
     -ms-transform: skewX(-200deg); 
      transform: skewX(-200deg); 
} 

Para hacer el div contienen la imagen correctamente, también es necesario añadir overflow: hidden.

http://jsfiddle.net/thirtydot/yM49N/3/