Перекос CSS трансформации, как сделать изображение сверху горизонтальным?

Question

Вопрос в том, как сделать изображение.box2 горизонтальным, как первый.box div?

Смотрите FidDle: http://jsfiddle.net/PArPj/2/

.box2{
    height:600px;
    width: 300px;
    overflow:hidden;
    -ms-transform:skewY(-20deg); /* IE 9 */
    -moz-transform:skewY(-20deg); /* Firefox */
    -webkit-transform:skewY(-20deg); /* Safari and Chrome */
    -o-transform:skewY(-20deg); /* Opera */
    transform:skewY(-20deg);
    float: left;
}

.box2 img {
    height: 600px;
    width: 300px;
    -ms-transform:skewY(-20deg); /* IE 9 */
    -moz-transform:skewY(-20deg); /* Firefox */
    -webkit-transform:skewY(-20deg); /* Safari and Chrome */
    -o-transform:skewY(-20deg); /* Opera */
    transform:skewY(-20deg);

    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Safari and Chrome */
    -moz-transform-origin: 100% 100%; /* Firefox */
    -o-transform-origin: 100% 100%; /* Opera */
    transform-origin: 100% 100%;

}

Answer 1

Использование transform:rotate(35deg) skewY(-20deg);