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

Is it possible to use CSS Counters To Increment The Rotation Of An Element

是否可以使用 CSS 计数器函数来增加元素的旋转?对于每个 <li> 元素,我想将其旋转比最后一个 <li> 元素多 2 度。我正在尝试类似的东西:

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

仅使用 CSS 是否可以实现?

没有

[Counter values] can be used with the ‘counter()’ and ‘counters()’ functions. ... [They] can be used by an author anywhere that accepts a <string>.

CSS Lists Module Level 3

并且 rotate() 不接受 :

‘rotate()’ = rotate( [ <angle> | <zero> ] )

CSS Transforms Module Level 1

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

Components of a calc() expression can be literal values or ‘attr()’ or ‘calc()’ expressions.

CSS Values and Units Module Level 3

没有 ,所以还是不行。