Is there a way to convert a unit into another using CSS?

49 Views Asked by At

Is there a way to convert a unit into another without using JavaScript?

I thought when I divide a <length> with another <length> unit, the result would be <number>. Such as calc(200px / 100px) would be 2 so calc((200px / 100px) * 15deg) would resolve into 30deg. But it seems it doesn't work this way.


I'm trying to make an element rotate based on the width of the window. When the window is 100px wide, the element should rotate 15deg, and 200px is 30deg and so on:

transform: rotate(calc((100vw / 100px) * 15deg));

Any way to make this work?

.cube {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: salmon;
  
  /* doesn't work */
  transform: rotate(calc((100vw / 100px) * 15deg));
}
<div class="cube">Cube</div>

0

There are 0 best solutions below