如何仅旋转div内部内容且保持原位置？求rotate替代方案

嘿，我来帮你搞定这个麻烦的旋转定位问题！你之前旋转整个容器导致偏移，核心原因是容器旋转后会改变它在文档流里的占位和定位原点。如果不想动容器本身，我们有几个更靠谱的方案：

方案1：只旋转内部子元素，容器完全不动 #

这是最直接的思路——让#test容器保持原来的尺寸和位置，单独旋转里面的每个子元素。这样既实现了内容旋转的效果，又不会出现容器偏移的问题。

示例代码：

#color{ background:blue; padding:10px; }
#test{ 
  width:100px; 
  height:50px; 
  border:2px solid black; 
  /* 容器保持原样，用flex布局让子元素垂直排列（和你初始结构一致） */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
/* 给所有子元素加上旋转效果 */
#test > div {
  transform: rotate(90deg);
  /* 可选：加一点 margin 避免子元素挤在一起 */
  margin: 4px 0;
}

<div id="test">
  <div id="color"></div>
  <div>Name</div>
  <div>Price</div>
</div>

要旋转180°或270°，直接改rotate()里的角度值就行，容器的位置和尺寸全程不会变。

方案2：用writing-mode实现垂直文本（适合纯文本场景） #

如果你的需求只是让文本垂直显示（类似90°旋转的效果），可以用CSS的writing-mode属性，完全不需要transform: rotate。这种方法对文本更友好，也不会有任何定位偏移问题。

示例代码（实现90°垂直文本效果）：

#color{ background:blue; padding:10px; }
#test{ 
  width:100px; 
  height:50px; 
  border:2px solid black; 
  writing-mode: vertical-rl; /* 文本垂直从右到左排列 */
  text-orientation: upright; /* 让文字保持直立，不倾斜 */
}

<div id="test">
  <div id="color"></div>
  <div>Name</div>
  <div>Price</div>
</div>

想要270°的效果？换成writing-mode: vertical-lr就行，同样不会有偏移问题。

方案3：如果一定要旋转容器，修正偏移 #

要是你坚持要旋转整个容器，那可以调整旋转原点并手动修正位置。不过这个方法需要计算偏移量，不如前两种灵活，仅供参考：

#color{ background:blue; padding:10px; }
#test{ 
  width:100px; 
  height:50px; 
  border:2px solid black; 
  transform: rotate(90deg);
  transform-origin: top left; /* 把旋转原点设为容器左上角 */
  position: relative;
  left: 50px; /* 旋转后容器会向右移，这里向左偏移修正位置 */
}

总的来说，前两种不旋转容器的方案更省心，推荐优先试试方案1～

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