0

背景画像を受け入れることができる回転コンテナーを作成しようとしています。

問題は、元の画像の比率を維持しようとしているため、画像が歪んでおらず、トリミングされているだけです。

ここに私が設定したフィドルがあります： http://jsfiddle.net/RyU9W/38/

HTML:

            <div id="container" class="color-container">
            <p>Colored Container</p>
        </div>


<div class="sep"></div><div class="sep"></div>

        <div id="container" class="image-container">
            <p>Image Container</p>
        </div>

CSS:

    p {padding: 250px 0;}
.sep {margin: 250px 0;}


#container{background:none; position:relative;}

#container:before {
    content: "";
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    padding: 100px 0;
    z-index:-1;
    -webkit-transform: skew(0deg, 4deg) translateZ(0);
    transform: skew(0deg, 4deg) translateZ(0);
}


.color-container:before {background: royalblue;}

完全に機能している色付きのコンテナがありますが、画像では正しく回転しません。

助けていただければ幸いです！

4

1 に答える 1

1

タグに変換を適用する必要がありますimg。また、2 つの #container div があり、id は一意である必要があります。PS: 画像の下部に歪んだコンテナを表示するには、backstretch div から隠されたオーバーフローを削除する必要があります。

于 2015-05-14T12:32:56.627 に答える