JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div id="panel">
  <button id="slow">slow</button>
  <button id="medium">medium</button>
  <button id="fast">fast</button>
</div>

<div id="box">
  <div class="player" style="--left: 0; --top: 0;"></div>
</div>

CSS

:root {
  --degree: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
}

#box {
  background: rebeccapurple;
  height: 200px;
  position: relative;
  transform: rotate3d(0, 0, 1, calc(var(--degree) * 1deg));
  transform-origin: center;
  transition: transform 10ms;
  width: 200px;
}

.player {
  --left: 0;
  --top: 0;
  
  background: green;
  height: 30px;
  left: var(--left);
  position: absolute;
  top: var(--top);
  transform: rotate3d(0, 0, 1, calc(var(--degree) * -1deg));
  transform-origin: center;
  transition: transform 10ms;
  width: 100px;
}

JavaScript

var slowButton = document.querySelector('#slow');
var mediumButton = document.querySelector('#medium');
var fastButton = document.querySelector('#fast');
var box = document.querySelector('#box');
var degree = 0;
var speed = 0;

var timer = window.setInterval(() => {
	degree += speed;
	box.style.setProperty('--degree', degree);
}, 10);

function clickSpeed(s) {
	speed = s;
}

slowButton.addEventListener('click', () => {
	clickSpeed(1);
})
mediumButton.addEventListener('click', () => {
	clickSpeed(2);
})
fastButton.addEventListener('click', () => {
	clickSpeed(3);
})