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>

CSS

:root {
  --speed: 0;
}

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

#box {
  animation: spin calc(var(--speed) * 1s) infinite linear;
  background: rebeccapurple;
  height: 200px;
  width: 200px;
}

@keyframes spin {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

JavaScript

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

function clickSpeed(speed) {
	box.style.setProperty('--speed', speed);
}

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