网页标题单个字母悬停变色正常，旋转动画无效？求解决方法

问题核心在于<span>元素默认是行内元素，CSS的transform属性对行内元素不生效，所以直接添加rotate不会有效果。只需要先修改span的显示模式，再添加动画属性即可。

基础旋转效果（悬停时旋转45度） #

修改CSS，给span设置display: inline-block，同时可以添加过渡动画让效果更平滑：

.title-text {
  color: #000000;
}
.title-text span {
  display: inline-block; /* 关键：让元素支持transform */
  transition: all 0.3s ease; /* 可选：添加过渡动画，让状态变化更自然 */
}
.title-text span:hover {
  color: #ff0000;
  transform: rotate(45deg); /* 现在旋转效果可以正常生效 */
}

HTML代码保持不变：

<h1 class="title-text">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</h1>

自定义关键帧动画（更复杂的效果） #

如果需要更丰富的动画（比如旋转+缩放），可以定义CSS关键帧：

.title-text {
  color: #000000;
}
.title-text span {
  display: inline-block;
  transition: all 0.3s ease;
}

/* 定义关键帧动画 */
@keyframes hoverRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(1.2);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

.title-text span:hover {
  color: #ff0000;
  animation: hoverRotate 0.6s ease-in-out; /* 调用关键帧动画 */
}

注意事项 #

• 除了inline-block，也可以用block配合float: left实现，但inline-block更适合保持文字的自然排列。
• 如果不需要过渡效果，可以去掉transition属性，直接在hover时应用transform或动画。

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