旋转不同宽度元素后错位堆叠，调整CSS定位仍无效，需实现整齐布局

问题现象 #

旋转不同宽度的子元素后，部分元素错位堆叠，调整position属性无法解决，期望实现旋转后元素整齐排列的效果。

当前效果：

期望效果：

解决方案 #

问题根源在于旋转时元素的变换原点和布局空间未匹配，可通过调整transform-origin、配合位移修正，结合flex布局实现对齐：

方案一：统一底部中心对齐（简洁版） #

.drop {
  border: 1px solid gray;
  width: 200px;
  height: 100px;
  margin: 50px;
  display: flex;
  align-items: flex-end;
  gap: 10px; /* 元素间间距 */
}

.drop div {
  transform: rotate(90deg);
  transform-origin: bottom center; /* 统一以底部中心为旋转原点 */
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="drop">
  <div class="box1 bg-warning" style="width:50px;height:50px;"></div>
  <div class="box2 bg-dark" style="width:75px;height:50px"></div>
  <div class="box3 bg-danger" style="width:100px;height:50px"></div>
</div>

方案二：中心对齐（自定义位移） #

如果需要以中心对齐，可针对不同宽度元素补充位移修正：

.drop {
  border: 1px solid gray;
  width: 200px;
  height: 50px;
  margin: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop div {
  transform: rotate(90deg);
  transform-origin: center center;
}

/* 根据宽度差值反向位移，修正中心对齐 */
.box2 {
  transform: rotate(90deg) translate(-12.5px, -12.5px);
}

.box3 {
  transform: rotate(90deg) translate(-25px, -25px);
}

原理说明 #

• 容器布局调整：使用flex布局替代默认流，快速实现横向对齐，同时调整容器尺寸适配旋转后的元素空间。
• 变换原点统一：通过设置transform-origin为底部中心，让所有元素旋转后的基准点一致，避免错位。
• 位移修正：针对中心对齐场景，根据元素宽度差值的一半反向位移，确保所有元素中心重合对齐。

内容的提问来源于stack exchange，提问作者rista