CODEWITHSUNDEEP
cssunits-of-measurementcss-calc
Anna Avina
Anna Avina

Reputation: 81

Any way to "cast" units in CSS?

I'm trying to change element rotation in CSS with the respect to screen width. Something like:

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

Apparently, length arithmetic returns <length>, and dividing degrees on length is illegal. On the other hand calc(30deg / 2) works fine. Is there any CSS trick to "cast" length to <number>? I'd rather avoid JavaScript at the moment.

Upvotes: 4

Views: 1614

Answers (1)

Anna Avina
Anna Avina

Reputation: 81

It seems, no.

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.

Also, https://www.w3.org/TR/css-values-4/#calc-type-checking

Upvotes: 2

Related Questions