Drehen eines div neben einem schwebte div

Question

Ich habe dieses Layout: (auch 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>

Ich versuche, die .rotate div sein direkt neben dem .left div zu erhalten aber ich kann nicht.

Ich habe versucht ...

• Schwimmer das gedrehte div (im Code-Schnipsel) als auch nach links, aber es nimmt die Breite, als wäre es nicht gedreht wurde.
• Zugabe position:absolute und left:0, aber dann die Überlappungen der Inhalt

Wie kann ich ein Div bekommen neben einer links schwebte div drehen?

Answer 1

Ändern Sie einfach die transform-orgin des gedrehten div und entfernen Sie auch die translate von diesem Element.

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