Come posso ruotare un elemento con css senza interrompere il "flusso" del layout?

Question

Scatola in alto a sinistra: questa è la tabella originale.

scatola Medio: questo è ciò che succede quando applico:

.rotate { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
} 

all'elemento rosso.

Bottom Right box: questo è ciò che alla fine voglio che sia la middle box. Come puoi vedere, la tabella che contiene l'elemento rosso tratta correttamente quest'ultimo contenendo completamente quest'ultimo nell'elemento in alto a sinistra senza alcun tipo di overflow.

Cosa devo applicare alla casella centrale per farlo comportarsi come il terzo?

Ovviamente sto usando un esempio molto semplificato per illustrare un punto

<div> 
<table id='one'> 
    <tr> 
     <td> 
      <div class='red'></div> 
     </td> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td><div class="blue"></div></td> 
     <td><div class="blue"></div></td> 
    </tr> 
</table> 
</div> 

<div> 
<table id='two'> 
    <tr> 
     <td> 
      <div class='red rotate'></div> 
     </td> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td><div class="blue"></div></td> 
     <td><div class="blue"></div></td> 
    </tr> 
</table> 
</div> 

<div> 
<table id='three'> 
    <tr> 
     <td> 
      <div class='red'></div> 
     </td> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td><div class="blue"></div></td> 
     <td><div class="blue"></div></td> 
    </tr> 
</table> 
</div> 

CSS:

table, th, td { 
    border: 1px solid black; 
} 

#two { 
    margin-top:20px; 
    margin-left:350px; 
} 

#three { 
    margin-top:20px; 
    margin-left:700px; 
} 

.red { 
    width: 150px; 
    height: 50px; 
    background-color:red; 
} 

#three .red { 
    width: 50px; 
    height: 150px; 
    background-color:red; 
} 

.blue { 
    width: 100px; 
    height:100px; 
    background-color: blue; 
} 

.rotate { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
} 

Answer 1

Dal momento che si sta impostando la larghezza iniziale e l'altezza della .red, si può semplicemente scambiare quelle proprietà su ruotare.

Sostituire questo:

.rotate { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
} 

Con questo:

.rotate { 
    width: 50px; 
    height: 150px; 
} 

Demo