Posizionamento elementi div ruotati

Question

Sto riscontrando qualche difficoltà nel posizionare un elemento div ruotato. Finora ho:

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

che ruota il mio div bene. tuttavia, ho problemi a "bloccarlo" sul lato sinistro. (IE normalmente farei qualcosa seguendo le linee come: posizione fissa, sinistra 0px, altezza 100%, larghezza: qualunque).

Answer 1

Se si intende che il banner viene ruotato e fissato sul lato sinistro della finestra del browser, è possibile utilizzare la proprietà transform-origin. Di default è impostato su 50% 50%. Questo è il 50% della larghezza e dell'altezza dell'elemento (il centro dell'elemento).

È possibile provare a impostare l'origine su 0% 0%. questo è l'angolo in alto a sinistra del banner e quindi ruotarlo attorno a quell'angolo. Ora con il banner ruotato, l'origine è diventata l'angolo in basso a sinistra del banner. È possibile posizionarlo fissato sul lato sinistro della browserwindow in questo modo:

#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:
Se si vuole che la barra sia la stessa altezza del browserwindow dopo la rotazione, che può essere fatto con javascript o jQuery. Come questo:

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

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

Answer 2

Vorrei davvero poter lasciare un commento, perché non sono sicuro al 100% di aver capito il problema che stai affrontando.

Ritengo che il problema possa essere risolto incapsulando il vostro banner banner ruotato in uno normale e impostando la posizione del contenitore div come fisso e lasciato: 0px. Ho messo su un violino di mostrare ciò che voglio dire:

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

Spero che questo aiuti!