CSS在旋轉內嵌塊元素後，高度/佈局未對齊

Question

旋轉了一組矩形inline-block元素後，新版面寬度和高度在佈局流程中不受重視。這意味着它們彼此重疊。有沒有辦法解決這個問題？

在下面的示例中，請注意如何覆蓋左邊距，並且第二行塊上方有大的空白區域。

p { 
 
    width: 20px; 
 
    height: 80px; 
 
    background: red; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
    border: #FFF solid 1px; 
 
} 
 
.r { 
 
    transform: rotate(90deg); 
 
}

Before: 
 
<br/> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<hr/>After: 
 
<br/> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p>

活生生的例子：http://codepen.io/anon/pen/vKqjoR?editors=1100#0

Answer 1

頁面佈局總是處理由th e瀏覽器之前應用了CSS轉換，目前還沒有辦法觸發CSS來重新處理佈局。因此，解決此問題的唯一方法是向旋轉的元素添加額外的邊距以手動重新定位它們。

的一般使用的公式重新定位旋轉元件如下：

M = absoluteValueOf([element height] - [element width])/2 

margin: -M-[margin-top]/2, M+[margin-left]/2; 

在上面的例子，這將是：

M = (80 - 20)/2      = 30 

margin: -30-0/2, 30+10/2    = -30 35 

最終CSS：

.r { 
    transform: rotate(90deg); 
    margin:-30px 35px; 
} 

Answer 2

margin-left: 75px會給他們甚至間距。

p { 
 
    width: 20px; 
 
    height: 80px; 
 
    background: red; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
    border: #FFF solid 1px; 
 
} 
 
.r { 
 
    transform: rotate(90deg); 
 
    margin-left: 75px; 
 
}

Before: 
 
<br/> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<hr/>After: 
 
<br/> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p>

Answer 3

transform不實際上影響佈局和定位......這是一個完全視覺效果。

高度不會變成寬度，反之亦然。

你需要相應地調整頁邊距......是這樣的：

p { 
 
    width: 20px; 
 
    height: 80px; 
 
    background: red; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
    border: #FFF solid 1px; 
 
} 
 
p.r { 
 
    transform: rotate(90deg); 
 
    margin-right: 20px; 
 
    margin-left: 60px; 
 
}

Before: 
 
<br/> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<hr/>After: 
 
<br/> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p>

Answer 4

p{ 
 
    width: 20px; 
 
    height: 80px; 
 
    background: red; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
    border: #FFF solid 1px; 
 
} 
 
.r { 
 
    transform: rotate(90deg); 
 
    margin-left:30px; 
 
    margin-right:40px; 
 
}

Before:<br/> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<hr/>After:<br/> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p> 
 
<p class='r'></p>

Use Following code: 

<pre> 
.r { 
    transform: rotate(90deg); 
    margin-left:30px; 
    margin-right:40px; 
} 
</pre> 

Note: 
I have added margin left and margin right because the height provided by you is 80px and 
when it is rotating all are overlapping with each other because previous width was 20px 
and after rotating now width is 80px (after rotate height converted in width).