回転div要素を配置する

Question

回転div要素を配置するのが難しいです。これまでのところ、私は持っています：

#side-banner { 
transform: rotate(270deg); } 

私のdivを回転させるだけです。しかし、私は左にそれを固定することに問題があります。 （IEは通常、位置固定、左端0px、高さ100％、幅：何であれ、行に沿って何かをします）。

Answer 1

バナーを回転させてブラウザウィンドウの左側に固定する場合は、transform-originプロパティを使用できます。デフォルトでは50％50％に設定されています。これは、要素の幅と高さの50％です（要素の中心）。

原点を0％0％に設定できます。それはバナーの左上隅であり、そのコーナーの周りを回転させます。今度はバナーを回転させると、原点はバナーの左下隅になります。

#side-banner { 
    poition:fixed; 
    left:0; 
    top:50%; 
    width:300px; /* after rotation this is the height */ 
    margin-top:150px; /* is 50% of width */ 
    transform: rotate(270deg); 
    transform-origin:0% 0%; /* set to the upper-left corner */ 
    -ms-transform: rotate(270deg); /* IE 9 */ 
    -ms-transform-origin:0% 0%; /* IE 9 */ 
    -webkit-transform: rotate(270deg); /* Safari and Chrome */ 
    -webkit-transform-origin:0% 0%; /* Safari and Chrome */ 
} 

編集：あなたは、それはこのようbrowserwindowの左側に固定配置することができますが、バナーが同じ高さになりたい場合はJavaScriptで行うことができ、回転後browserwindow、として
かjQuery。このように：

var width = $(window).height(); 
var marginTop = Math.round(width/2); 

$('#side-banner').css({ 
    'width': width, 
    'margin-top': marginTop 
}); 

Answer 2

あなたが直面している問題を100％理解しているわけではないので、私はちょうどコメントを残しておきたいと思います。

普通のものの中に回転したバナーdivをカプセル化し、コンテナdivの位置を固定して左に設定すると問題が解決できると感じています：0px。私は私が何を意味するかをお見せするためにバイオリンを設定します。

http://jsfiddle.net/q7qgn/1/

HTML：

<div class="pageContainer"> 
    <div class="bannerContainer"> 
     <div class="banner"> 
      &nbsp;banner 
     </div> 
     <br/>bannerContainer 
    </div> 
</div> 

CSS：このことができます

.pageContainer{ 
margin: 0px; 
background-color: grey; 
width: 400px; 
height: 400px; 
} 

.bannerContainer{ 
background-color: green; 
width: 100px; 
height:200px; 
position: fixed; 
left: 0px; 
} 

.banner{ 
background-color: red; 
width: 100px; 
height: 100px; 
transform: rotate(270deg); 
-webkit-transform: rotate(270deg); 
} 

願っています！