纯CSS实现六边形图标悬停累加旋转60度并保持状态可行吗？

仅靠常规的hover + transform确实做不到，因为鼠标移出后hover状态消失，样式会自动重置回初始状态。但可以借助CSS计数器的持久化特性来实现需求，核心是用计数器记录旋转次数，每次悬停触发计数器递增，再将计数转换成旋转角度。

实现代码 #

HTML结构

<div class="hex-wrap">
  <div class="hex-icon">🔶</div>
</div>

CSS样式

/* 初始化计数器，初始值为0 */
.hex-wrap {
  counter-reset: rotate-times 0;
}

/* 悬停时触发计数器递增，并应用旋转动画 */
.hex-wrap:hover .hex-icon {
  counter-increment: rotate-times 1;
  /* 计算旋转角度：每次累加60度 */
  transform: rotate(calc(60deg * counter(rotate-times)));
  transition: transform 0.5s ease;
}

/* 持久化旋转状态：默认样式也基于计数器值 */
.hex-icon {
  display: inline-block;
  font-size: 50px;
  /* 初始状态与计数器绑定，确保移出后保持当前旋转角度 */
  transform: rotate(calc(60deg * counter(rotate-times)));
}

原理说明 #

• CSS计数器一旦被递增后，不会自动重置，除非手动调用counter-reset，这是实现状态持久化的关键。
• 每次鼠标悬停图标时，计数器rotate-times加1，通过calc()将计数器值乘以60deg，得到当前需要旋转的总角度。
• 图标默认的transform属性同样绑定计数器值，所以鼠标移出后，会保持当前的旋转状态，下次悬停时继续累加60度。

局限性 #

如果鼠标快速多次悬停图标，可能会触发多次计数器递增（取决于浏览器的事件触发逻辑），但基本能满足“每次悬停旋转60度并保持状态”的需求。

内容的提问来源于stack exchange，提问作者Clément Torchiat