1

左側に 10 度回転した長方形の div を含むページ レイアウトを作成しようとしています。ブラウザのサイズに合わせて拡大し、上、左、下の端が表示されません。つまり、ページは中央で斜めに分割されているように見えるはずです。

これまでのコードでは div が適切に作成されていますが、ページを展開すると端が見え始めます。

http://jsfiddle.net/jpQvL/1/

HTML

 <div id="wrapper">
    <div id="right"></div>
 </div>

CSS

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
 }

#wrapper {
    position:relative;
    height: 100%;
   }    

#right {
    background: #000;
    transition: all 0.5s ease-in-out 0s;
    width: 50%;
    position: fixed;
    min-height: 110%;
    transform: rotate(10deg);
    top: -73px;
}
4

1 に答える 1

3

問題は、tranformプロパティにレンダリング プレフィックスが必要なことです。次の行を追加する必要があります。

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

これを見てください

または、このようなプレフィックスのない多くのスクリプトのいずれかを使用します

于 2013-01-09T20:08:50.587 に答える