Wie zu vermeiden, Div Überlappung, wenn Text umwandeln

Question

Ich versuche, den Text im Div vertikal zu gestalten, und ich sehe das Div überlappt sich gegenseitig. Wie kann ich das vermeiden? Auch der Rand des div in der Spitze ist nicht sichtbar.

<div style="width: 576px;border: 1px solid black;margin: 25px;padding: 25px;text-align: center;height: 393px;transform: rotate(90deg);float:left;clear: left;"> 
    <br><br><br><br><br><br><br><br> 
    <div> 
     <h5>TEST</h5></div><br> 
    <span>1/2</span> 
</div> 
<div style="width: 576px;border: 1px solid black;margin: 25px;padding: 25px;text-align: center;height: 393px;transform: rotate(90deg);float:left;clear: left;"> 
    <br><br><br><br><br><br><br><br> 
    <div> 
     <h5>TEST</h5></div><br> 
    <span>2/2</span> 
</div> 

Answer 1

Es überlappt sich wegen der Rotation. Ihre divs sind 576px breit und 393px groß. Der Drehpunkt ist standardmäßig in der Mitte und da Ihre Box eine größere Breite als Höhe hat, überlappt sie sich. Wenn Sie möchten, dass Ihre Marge erscheint noch 25px zu sein, gelten die folgenden Margen:

top, bottom: (576 - 393)/2 + 25 = 116.5 
left, right: (393 - 576)/2 + 25 = -66.5 

Der Code würde wie folgt aussehen:

margin: 117px -67px; 

hoffe, das hilft!

Fiddle: https://jsfiddle.net/yq4ob9ao/1/

#div1, #div2 { 
 
    width: 576px; 
 
    border: 1px solid black; 
 
    margin: 117px -67px; 
 
    padding: 25px; 
 
    text-align: center; 
 
    height: 393px; 
 
    transform: rotate(90deg); 
 
    float:left; 
 
    clear: left; 
 
}

<div id="div1"> 
 
    <br><br><br><br><br><br><br><br> 
 
    <div> 
 
     <h5>TEST</h5></div><br> 
 
    <span>1/2</span> 
 
</div> 
 
<div id="div2"> 
 
    <br><br><br><br><br><br><br><br> 
 
    <div> 
 
     <h5>TEST</h5></div><br> 
 
    <span>2/2</span> 
 
</div>

Answer 2

Ihre Margen berechnet werden, bevor transform: rotate Eigenschaft die divs verwandelt. Sie müssen die oberen Ränder für einzelne Divs aktualisieren, um ihre Positionen anzupassen.

In der FIDDLE verwende ich margin-top: 100px; für die erste div und margin-top: 160px; für die zweite div als Beispiele.