2D-Wheel 1.08

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;
      
      /* Stop the rotation on hover and scale up */
    }

    .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>
    document.addEventListener("DOMContentLoaded", function () {
      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 =...