Как избежать перекрытия Div при преобразовании текста

Question

Я пытаюсь создать текст в div по вертикали, и я вижу, что div перекрывает друг друга. Как я могу избежать этого ?. Также граница 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>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

Он перекрывается из-за поворота. Ваши дивизии 576px широкий и 393px высокий. Точка вращения по умолчанию находится по центру, и поскольку ваш ящик имеет большую ширину, чем высоту, он перекрывается. Если вы хотите, чтобы ваш запас по-прежнему, как представляется 25px, применяются следующие поля:

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

код будет выглядеть следующим образом:

margin: 117px -67px; 

Надеется, что это помогает!

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

Ваши поля рассчитываются до того transform: rotate свойство трансформирует дивы. Вам нужно обновить верхние поля для отдельных разделов, чтобы отрегулировать их позиции.

В FIDDLE, я использую margin-top: 100px; для первого div и margin-top: 160px; для второго div в качестве примеров.