css - CSS 中的 "cast"单位有什么办法吗？

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

If compatible, the type resolves as described below (the following ignores precedence rules on the operators for simplicity):

At + or -, check that both sides have the same type, or that one side is a and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

At *, check that at least one side is <number>. If both sides are <integer>, resolve to <integer>. Otherwise, resolve to the type of the other side.

At /, check that the right side is <number>. If the left side is <integer>, resolve to <number>. Otherwise, resolve to the type of the left side.

Note: Algebraic simplifications do not affect the validity of the calc() expression or its resolved type. For example, calc(5px - 5px + 10s) and calc(0 * 5px + 10s) are both invalid due to the attempt to add a length and a time.

此外，https://www.w3.org/TR/css-values-4/#calc-type-checking