如何在CSS中围绕自身轴旋转单个字母？

当然可以不用手动给每个字母套<span>啦！我给你分享两种实用方案，按需选择就行～

方案1：JavaScript自动生成字母包裹元素（最灵活） #

你不用手动写一堆<span class="letter">，几行JS就能自动帮你把单词拆成单个字母的包裹元素，HTML代码会清爽很多：

HTML 代码 #

<h1 class="word">CHEESE</h1>

JavaScript 代码 #

把这段代码放在页面底部（或者DOMContentLoaded事件里，确保DOM加载完成后执行）：

document.querySelectorAll('.word').forEach(word => {
  word.innerHTML = word.textContent.split('').map(letter => `<span class="letter">${letter}</span>`).join('');
});

CSS 代码 #

保持你原来的样式就行，还可以加个过渡让动画更丝滑：

.word:hover .letter {
  display: inline-block;
  transform: rotateY(-180deg);
  transition: transform 0.3s ease; /* 过渡效果，可选但推荐 */
}

页面加载后，JS会自动把每个字母拆成带letter类的span，效果和你手动写的完全一致，但不用重复写冗余代码。

方案2：纯CSS模拟旋转（无JS，有局限性） #

如果不想用JavaScript，也有个纯CSS小技巧，但它是模拟效果，不是真的单独控制每个字母，适合简单场景：

HTML 代码 #

需要给元素加个data-text属性，值和文本内容一致：

<h1 class="word" data-text="CHEESE">CHEESE</h1>

CSS 代码 #

.word {
  display: inline-block;
  background: #000; /* 原文本颜色 */
  background-clip: text;
  color: transparent;
  position: relative;
}

.word::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  background: #ff0000; /* 旋转后的文本颜色 */
  background-clip: text;
  color: transparent;
  transform: rotateY(-180deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.word:hover::before {
  opacity: 1;
}

这个方法是把整个单词的镜像版本盖在原文本上，hover时显示镜像，视觉上类似旋转效果，但没法实现逐个字母延迟旋转这类精细控制，所以如果需要更灵活的动画，还是方案1更合适。

额外优化：逐个字母延迟旋转（可选） #

如果想让字母hover时从左到右逐个旋转，只需要修改JS代码，给每个span加个延迟样式：

document.querySelectorAll('.word').forEach(word => {
  word.innerHTML = word.textContent.split('').map((letter, index) => 
    `<span class="letter" style="transition-delay: ${index * 0.1}s">${letter}</span>`
  ).join('');
});

CSS里保留过渡效果：

.word .letter {
  display: inline-block;
  transition: transform 0.3s ease;
}

.word:hover .letter {
  transform: rotateY(-180deg);
}

这样hover的时候字母会依次旋转，效果更生动～

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