Любой способ "привести" единицы в CSS?

Question

Я пытаюсь изменить поворот элемента в CSS относительно ширины экрана. Что-то вроде:

transform: rotate(calc(30deg / 100vw / 1000px));

Очевидно, арифметика длины возвращает <length>, а деление градусов на длину недопустимо. С другой стороны calc(30deg / 2) работает нормально. Есть ли какой-нибудь трюк CSS, чтобы «привести» длину к <number>? Я бы предпочел избегать JavaScript на данный момент.

Answer 1

Кажется, нет.

https://drafts.csswg.org/css-values-3/#calc-notation

Если он совместим, тип разрешается, как описано ниже (ниже для простоты игнорируются правила приоритета операторов):

На + или -, убедитесь, что обе стороны имеют одинаковый тип, или что одна сторона - а, а другая - <integer>. Если обе стороны одного типа, разрешите этот тип. Если одна сторона - <number>, а другая - <integer>, разрешите <number>.

На * убедитесь, что по крайней мере одна сторона <number>. Если обе стороны <integer>, разрешите <integer>. В противном случае разрешите тип другой стороны.

На /, убедитесь, что правая сторона <number>. Если левая сторона равна <integer>, разрешите значение <number>. В противном случае разрешите тип левой стороны.

Примечание. Алгебраические упрощения не влияют на действительность выражения calc() или его разрешенный тип. Например, calc(5px - 5px + 10s) и calc(0 * 5px + 10s) недопустимы из-за попытки добавить длину и время.

Также https://www.w3.org/TR/css-values-4/#calc-type-checking