2D-Wheel 1.01

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Animated Carousel</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      perspective: 800px;
    }
    .stage {
      width: 90vh;
      padding-bottom: 90vh;
      margin: 2vh;
      max-width: 90vh;
      transform-style: preserve-3d;
      animation: rotate 60s linear infinite;
    }
    .item {
      font-size: 1.3em;
      position: absolute;
      transform-origin: 50% 50%;
      cursor: pointer;
    }
    .item:hover {
      background-color: orange !important;
      animation: none !important; /* Stop the rotation on hover */
    }
    @keyframes rotate {
      0% {transform: rotateZ(0deg);}
      100% {transform: rotateZ(360deg);}
    }
  </style>

  <script>
    function create_divStage() {
      const divStage = document.createElement('div');
      divStage.className = 'stage';
      divStage.innerHTML = '';
      divStage.style.position = 'relative';
      document.body.appendChild(divStage);
      return divStage;
    }

    function positionDivsInCircle(elementOptions, parentDiv) {
      let itemSize, itemDistance;
      let numItems = elementOptions.numItems;
      if (numItems <= 1) { itemSize = 30, itemDistance = 15 }
      else if (numItems <= 5) { itemSize = 20, itemDistance = 4 }
      else if (numItems <= 10) { itemSize = 15, itemDistance = 3 }
      else if (numItems <= 20) { itemSize = 7.0, itemDistance = 2.7 }
      else if (numItems <= 30) { itemSize = 6.0, itemDistance = 2.6 }
      else if (numItems <= 40) { itemSize = 5.0, itemDistance = 2.4 }
      else if (numItems <= 50) { itemSize = 4.0, itemDistance = 2.3 }
      else if (numItems <= 60) { itemSize = 3.5, itemDistance = 2.2 }
      else if (numItems <= 70) { itemSize = 3.0, itemDistance = 2.1 }
      else if (numItems <= 80) { itemSize =...