CSS變形歪斜，如何讓圖像頂部水平？

Question

問題是：如何使.box2圖像頂部水平，像第一個.box div？

見小提琴：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);