JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="spacer"></div>
  <div class="rotating-box"></div>
  <div class="spacer"></div>

CSS

body {
      margin: 0;
      height: 200vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f0f0;
    }

    .spacer {
      height: 100vh;
    }

    .rotating-box {
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg, #ff5733, #33c4ff);
      border-radius: 8px;
      transform-origin: center;
      transform: rotate(0deg);
      transition: transform 0.1s linear;
    }

JavaScript

const box = document.querySelector('.rotating-box');
const maxScroll = document.documentElement.scrollHeight - window.innerHeight;

window.addEventListener('scroll', () => {
  const scrollFraction = window.scrollY / maxScroll;
  const rotation = scrollFraction * 360;
  box.style.transform = `rotate(${rotation}deg)`;
});