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

Question

Is it possible to use the CSS Counter function to increment the rotation of an element? For every <li> element I would like to rotate it 2 degrees more than the last <li> element. I am attemping something like:

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

Is this possible to achieve using only CSS?

Answer 1

No.

[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

And rotate() doesn't accept a <string>:

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

—CSS Transforms Module Level 1

I thought maybe we could get around that with calc(), since it can be used in place of an <angle>, but

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

—CSS Values and Units Module Level 3

No <string>s, so that still won't work.