Pozycjonowanie obróconych elementów div

Question

Mam trudności z pozycjonowaniem obróconego elementu div. Do tej pory mam:

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

który obraca mój div po prostu dobrze. jednak mam problem "Przypinanie" go na lewą stronę. (IE normalnie zrobiłbym coś wzdłuż linii: pozycja ustalona, ​​lewa 0px, wysokość 100%, szerokość: cokolwiek).

Answer 1

Jeśli chcesz, aby baner był obrócony i zamocowany po lewej stronie browserwindow, możesz użyć właściwości transform-origin. Domyślnie jest ustawiony na 50% 50%. To 50% szerokości i wysokości elementu (środek elementu).

Możesz spróbować ustawić początek na 0% 0%. to jest lewy górny róg banera, a następnie obróć go w tym rogu. Teraz, gdy baner jest obrócony, pochodzenie stało się lewym dolnym rogiem banera. Można umieścić go naprawić po lewej stronie browserwindow jak ten:

#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 */ 
} 

Edit:
Jeśli chcesz baner być taka sama wysokość jak browserwindow po rotacji, co można zrobić z javascript lub jQuery. Tak:

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

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

Answer 2

Na pewno żałuję, że nie mogę zostawić komentarza, ponieważ nie jestem w 100% pewny, że rozumiem problem, przed którym stoisz.

Uważam, że Twój problem można rozwiązać poprzez umieszczenie obróconego banera div wewnątrz normalnego i ustawienie pozycji div div jako stałej i lewej: 0px. Założyłem skrzypce, aby pokazać, co mam na myśli:

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

Nadzieja to pomaga!