Можно ли рассчитать степень в css с помощью vw?

Question

Я пытаюсь сделать мой Skew отзывчивым с помощью view-width.

$SkewXBar: calc(5deg + 10vw);

Я уже искал в Интернете, но ничего не нашел в отношении вычисления степени с помощью vw.

Если кто-то знает альтернативу, я был бы рад узнать.

Answer 1

Быстрая мысль. Самый простой способ - использовать JavaScript logi c. Что-то вроде следующего:

function calculate() {
  const deviceWidth = screen.width;
  const viewportWidth = window.innerWidth;
  const currentRatio = viewportWidth / deviceWidth;
  const angle = currentRatio * 360;
  document.querySelector('.rotating-bar').style.transform = `rotate(${angle}deg)`;
}

window.addEventListener('resize', calculate);

... что предполагает структуру HTML, подобную следующей:

<div class="rotating-bar">
  This rotates
</div>

Пример CodePen на https://codepen.io/baadaa/full/MWYMLwE