Свойство skewX () CSS3

Question

У меня есть практическое применение для свойства 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;
}

Answer 1

Вы можете применить инвертированный 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/