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