如何用HTML/CSS将单词中的单个字母旋转180度？

要实现单个字母的180度翻转，核心思路是把需要翻转的字母单独用容器包裹，再通过CSS的transform属性实现旋转。以下是具体实现方案：

1. HTML结构处理 #

将目标字母用<span>标签单独包裹，便于单独设置样式：

<p>Bu<span class="flip-180">t</span>ter</p>

2. CSS样式实现 #

定义专门的类来完成翻转，同时调整对齐细节避免字母错位：

.flip-180 {
  /* 核心：执行180度旋转 */
  transform: rotate(180deg);
  /* 设为行内块级元素，确保旋转变换生效（行内元素默认不支持transform） */
  display: inline-block;
  /* 垂直对齐，让翻转后的字母与其他字母保持同一基线 */
  vertical-align: middle;
  /* 可选：微调间距，适配不同字体的视觉效果 */
  margin: 0 1px;
}

注意事项 #

• 部分字体的字母旋转后可能出现视觉不协调的情况，可根据实际字体调整margin或vertical-align的值
• 若需要翻转的字母在文本中有多个，重复使用flip-180类即可

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .flip-180 {
      transform: rotate(180deg);
      display: inline-block;
      vertical-align: middle;
      margin: 0 1px;
    }
  </style>
</head>
<body>
  <p>Bu<span class="flip-180">t</span>ter</p>
</body>
</html>

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