CSS变换歪斜，如何使图像顶部水平

Question

问题是:如何使。box2图像顶部水平，像第一个。boxdiv ?

参见提琴: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);