Search code examples
csssassskewdegreescss-calc

Is it possible to calculate a degree in css with vw?

I'm trying to make my Skew responsive with view-width.

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

I've searched online already, but found nothing regarding calculating a degree with vw.

If somebody knows an alternative, I'd be pleased to know.

Solution

  • A quick thought. The simplest way would be using a JavaScript logic. Something like the following:

    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);

    ... which assumes an HTML structure like the following:

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

    CodePen example at https://codepen.io/baadaa/full/MWYMLwE