SkewX () CSS3 Property

Question

I have a practical use for the CSS3 skewX property. I wrote a simple picture similar to a script convention with jQuery. Images are distorted (no longer in CSS) as part of the design and in order to make the correct areas clickable, the contained divs need to be skewed.

The problem is that when the div is skewed, the image is also distorted. Skewing a distorted image does not look very good.

One of the solutions I tried was to reset the skewX value to 0deg in the image, but to no avail. In the violin, I did not include the accordion, as this is not necessary for the solution.

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

You can apply inverted skewX to img :

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

In order for the div image to contain the image correctly, you also need to add overflow: hidden .

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