2D-Wheel 1.10

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;
        overflow-x: hidden;
        overflow-y: hidden;
      }
      .stage {}
      .item {}
      .item:hover { background-color: orange !important;}
      .item.inside-overlay {
        background-color: orange !important;
        color: white !important;
      }
      .overlay {
        position: fixed;
        top: 50%;
        right: 5vw;
        width: 35vw;
        height: 2%;
        background-color: rgba(0, 0, 0, 0.1);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
      }
      @keyframes rotate {
        0% {transform: rotateZ(0deg);}
        100% {transform: rotateZ(360deg);}
      }
    </style>
  
  
    <script>
      let elementOptions=[], divStage=[], divOverlay=[];

      function create_SuperCircle(elementOptions) {
        divStage[elementOptions._id] = create_divStage(elementOptions);
        divOverlay[elementOptions._id] = create_divOverlay(elementOptions._id, elementOptions);
        positionDivsInCircle(elementOptions, divStage[elementOptions._id], divOverlay[elementOptions._id]);
      }

      function create_divStage(options) {
        const elementId = options._id;
        const divStage = document.createElement('div');
        divStage.className = 'stage';
        divStage.id = 'stage' + elementId;
        divStage.innerHTML = elementId;
        check_Object(options, divStage);
        document.body.appendChild(divStage);
        return divStage;
        function check_Object(obj,div) {
          function iterateObject(obj,depth) {
            for (const key in obj) {
          ...