如何用纯CSS按递增角度依次旋转元素？

嘿，这个问题我之前也碰到过！你用CSS计数器的思路其实挺巧妙的，但可惜CSS计数器有个关键限制——它只能在content这类接受字符串的属性里生效，像transform的rotate()需要的是标准的角度数值，没法直接解析计数器的输出，这就是你代码没生效的核心原因。

先看你原来的代码问题点 #

你写的计数器在::after伪元素里能正常显示，说明计数器的递增逻辑是对的，但transform: rotateZ(counter(my-counter)deg);这一行是无效的，因为浏览器无法把计数器的字符串值转换成角度值来用。

你的原HTML代码：

<div class="container"> 
  <div>Thing 1</div> 
  <div>Thing 2</div> 
  <div>Thing 3</div> 
</div>

你的原CSS代码：

.container { counter: my-counter; } 
.container > div { 
  transform: rotateZ(counter(my-counter)deg); /* 这里无效 */
  counter-increment: my-counter 5; 
} 
.container > div:after { 
  content: counter(my-counter); 
  margin-left: 1em; 
}

纯CSS可行方案：用:nth-child()结合calc() #

既然计数器没法直接用于变换属性，我们可以用:nth-child()选择器来定位每个子元素，再通过calc()计算对应的旋转角度。如果需要每个元素比前一个多旋转5deg，代码可以这么写：

.container > div {
  /* 基础样式，方便看效果 */
  padding: 8px 16px;
  margin: 8px 0;
  background: #f0f0f0;
  width: fit-content;
}

/* 第1个元素旋转5deg，第2个10deg，以此类推 */
.container > div:nth-child(1) {
  transform: rotateZ(calc(5deg * 1));
}
.container > div:nth-child(2) {
  transform: rotateZ(calc(5deg * 2));
}
.container > div:nth-child(3) {
  transform: rotateZ(calc(5deg * 3));
}
/* 如果有更多子元素，继续按这个格式往下加即可 */

如果希望第一个元素不旋转，从第二个开始递增5deg，那就把calc(5deg * (n-1))作为旋转值即可。

更简洁的变量写法 #

如果觉得重复写:nth-child()太繁琐，可以用CSS自定义属性来统一管理：

.container > div {
  transform: rotateZ(calc(5deg * var(--rotate-index)));
  padding: 8px 16px;
  margin: 8px 0;
  background: #f0f0f0;
  width: fit-content;
}

.container > div:nth-child(1) { --rotate-index: 1; }
.container > div:nth-child(2) { --rotate-index: 2; }
.container > div:nth-child(3) { --rotate-index: 3; }

这种方式后期调整角度基数（比如改成10deg）时，只需要修改calc()里的数值即可，更易维护。

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