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