<div id="spin" class="spinner">Spin Me</div>

.spinner {
  display: flex;
  place-items: center;
  justify-content: center;
  margin: auto;
  color: #fff;
  text-transform: uppercase;
  aspect-ratio: 1;
  max-width: 350px;
  width: 70vw;
  padding: 1rem;
  background: red;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border: 1px solid #000;
  cursor: pointer;

  /* Add perspective to make the 3D rotation visible */
  perspective: 800px;
}

.spin {
  animation: spin3d 1s ease forwards;
  transform-style: preserve-3d;
}

@keyframes spin3d {
  to {
    transform: rotateY(360deg);
  }
}

const spin = document.getElementById("spin");
spin.addEventListener("click", () => {
  spin.classList.add("spin");
});
spin.addEventListener("animationend", () => {
  spin.classList.remove("spin");
});