css - CSS変換スキュー、画像を水平にするにはどうすればよいですか?

Question

問題は、最初の .box div のように .box2 画像を水平にするにはどうすればよいですか?

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