लेआउट के "प्रवाह" को तोड़ने के बिना मैं सीएसएस के साथ तत्व कैसे घुमा सकता हूं?

Question

शीर्ष बाएं बॉक्स: यह मूल तालिका है।

मध्य बॉक्स:

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

लाल तत्व: इस जब मैं लागू क्या होता है।

नीचे दायां बॉक्स: यही वह है जो मैं आखिरकार मध्य बॉक्स को दिखाना चाहता हूं। जैसा कि आप देख सकते हैं, लाल तत्व वाली तालिका किसी भी तरह के बहने के बिना बाद में अपने शीर्ष बाएं तत्व में बाद में पूरी तरह से ठीक से इलाज करती है।

इसे तीसरे की तरह व्यवहार करने के लिए मध्य बॉक्स में आवेदन करने की क्या ज़रूरत है?

जाहिर है मैं एक बहुत ही सरल उदाहरण का उपयोग कर रहा एक बिंदु

<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> 

सीएसएस वर्णन करने के लिए:

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

जब से तुम प्रारंभिक चौड़ाई और .red की ऊंचाई तय कर रहे हैं, तो आप बस स्वैप कर सकते हैं घूर्णन पर उन गुणों।

इस बदलें:

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

इस के साथ

:

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

Demo