将CSS旋转后的元素对齐到容器左侧 - HTML/CSS

嘿，这个问题我之前也碰到过！核心原因是你对整个wrapper应用transform: rotate(-90deg)时，元素的坐标系也跟着旋转了——原来屏幕的“左侧”在旋转后的坐标系里已经不是你想的那个方向了，所以直接调left自然没用。下面给你两个靠谱的解决方案：

方案一：拆分旋转与定位（推荐） #

把旋转操作放到内部的SVG元素上，让wrapper保持正常的坐标系，这样定位就简单多了：

HTML结构 #

<div class="wrapper">
  <svg class="svg-item" ...></svg>
  <svg class="svg-item" ...></svg>
  <svg class="svg-item" ...></svg>
</div>

CSS样式 #

.wrapper {
  position: fixed;
  left: 0; /* 直接贴紧屏幕左侧，后续改成5vw/10%这类单位就行 */
  top: 50%;
  transform: translateY(-50%); /* 保持垂直居中 */
  background: yellow;
  padding: 8px; /* 按你需要的尺寸调整 */
}

.svg-item {
  transform: rotate(-90deg);
  display: block; /* 让SVG垂直排列 */
  margin: 4px 0; /* 调整SVG之间的间距 */
  /* 这里可以加SVG的尺寸样式 */
}

这样wrapper的坐标系和屏幕一致，你调整left值就能精准控制它和左侧的距离，垂直居中的效果也能稳稳保持。

方案二：如果必须旋转wrapper #

要是因为布局需求必须旋转整个wrapper，那得调整旋转原点并配合平移修正位置：

.wrapper {
  position: fixed;
  top: 50%;
  left: 0;
  transform-origin: top left; /* 把旋转原点设为容器的左上角 */
  transform: rotate(-90deg) translateY(-100%); /* 旋转后再平移修正位置 */
  background: yellow;
  padding: 8px;
}

这里的translateY(-100%)是关键：旋转后容器的“顶部”变成了屏幕左侧方向，通过这个平移把容器拉回垂直居中的位置，同时left:0就能让它贴紧屏幕左侧。

两种方案都能满足你的需求，推荐第一种，后续调整距离和维护起来更省心～

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