在CSS旋转内联块元素后，/ Height布局未对齐

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

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 2

transform 实际影响布局和定位......它完全是视觉效果。

高度不会变宽，反之亦然。

您需要相应地调整边距......就像这样：

＆＃13;

＆＃13;

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;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

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;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 4

在应用 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;
}