html - 是否可以使用 CSS 计数器来增加元素的旋转

Question

是否可以使用 CSS Counter 函数来增加元素的旋转？对于每个<li>元素，我想比最后一个<li>元素多旋转 2 度。我正在尝试类似的东西：

ul li:nth-of-type( 1n ) {
  counter-increment: rotation;
  transform: rotate( counter(rotation) + 1deg);
}

这是否可以仅使用 CSS 来实现？

Answer 1

不。

[计数器值] 可以与 'counter()' 和 'counters()' 函数一起使用。... [它们] 可以被作者在任何接受 <string> 的地方使用。

— CSS 列表模块级别 3

并且rotate()不接受 <string>：

'rotate()' = 旋转( [ <角度> | <零> ] )

— CSS 转换模块级别 1

我想也许我们可以用 来解决这个calc()问题，因为它可以用来代替 <angle>，但是

calc() 表达式的组成部分可以是文字值或“attr()”或“calc()”表达式。

— CSS 值和单位模块第 3 级

没有 <string>s，所以这仍然行不通。