轉動旁邊的一個浮動的div

Question

一個div我有這樣的佈局：（也是JSFiddle here）

.rotate { 
 
    transform: rotate(270deg) translate(-10em, 0); 
 
    transform-origin: 0 0; 
 
    float: left; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<div class='rotate'> 
 
    Rotated 
 
</div> 
 
<div class='left'> 
 
    Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> 
 
</div>

我試圖讓.rotate DIV是旁邊的.left DIV ，但我不能。

我試過......

• 浮動旋轉DIV左以及（在代碼段），但它佔用的寬度，如果它是不旋轉。
• 加入position:absolute和left:0，但隨後重疊內容

我如何獲得一個div旋轉旁邊一個左浮動的div？

Answer 1

只需更改旋轉的div的transform-orgin，並從該元素中刪除translate。

.rotate { 
 
    transform: rotate(270deg); 
 
    transform-origin: 100% 100%; 
 
    float:left; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<div class='rotate'> 
 
    Rotated 
 
</div> 
 
<div class='left'> 
 
    Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> 
 
</div>