2D-Wheel 1.05

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: 70vh;
            padding-bottom: 70vh;
            margin: 2vh;
            max-width: 90vh;
            transform-style: preserve-3d;            
        }

       .item {
            font-size: 1.1em;
            position: absolute;
            transform-origin: 50% 50%;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease; /* Added transform transition */
        }

        .item:hover {
            background-color: orange !important;
            transform: scale(1.2) rotateZ(0deg); /* 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; /* Adjust the width as needed */
            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>
        function create_divStage(elementOptions) {
            const divStage = document.createElement('div');
            divStage.className =...