How to use var in CSS? [Solved]

Question

Why following code doesn't works:

.child1{
background-color:gray;
transform:translateZ(-var(--fixed_pix));
}

but this one works well,

.child1{
background-color:gray;
transform:translateZ(-75px);
}

--fixed_pix has a value of 75px and is used in :root selector.

So shudn't -var(--fixed_pix ) translate to -75px? Or am I missing something! ty.

Answer 1

Yes, you're missing something: negate the var implies a multiply by -1 operation, so:

transform:translateZ(cal(-1 * var(--fixed_pix)));

... should work as expected ^^

Answer 2

visph thank you :)

also there is a typo, it is calc not cal.