animation

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D BB-8 Toggle Switch</title>
    <style>
        /* Base styles */
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            perspective: 1000px;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

/* Toggle container */
        .bb8-toggle {
            --toggle-size: 16px;
            --toggle-width: 10.625em;
            --toggle-height: 5.625em;
            --bb8-diameter: 4.375em;
            --radius: 99em;
            --transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            --accent: #de7d2f;
            --bb8-bg: #fff;
            --shadow-color: rgba(0, 0, 0, 0.3);
            
            cursor: pointer;
            font-size: var(--toggle-size);
            transform-style: preserve-3d;
            position: relative;
        }

/* Hide default checkbox */
        .bb8-toggle__checkbox {
            appearance: none;
            display: none;
        }

/* Main toggle container with 3D effect */
        .bb8-toggle__container {
            width: var(--toggle-width);
            height: var(--toggle-height);
            background: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4);
            background-size: 100% 11.25em;
            background-position-y: -5.625em;
            border-radius: var(--radius);
            position: relative;
            transition: var(--transition);
            box-shadow: 
                0 10px 20px var(--shadow-color),
                inset 0 -5px 15px rgba(255, 255, 255, 0.1);
            transform-style: preserve-3d;
            overflow: hidden;
        }

/* 3D depth effect for container */
        .bb8-toggle__container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: var(--radius);
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
            transform: translateZ(1px);
            pointer-events: none;
        }

/* BB-8 droid container */
        .bb8 {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: calc((var(--toggle-height) - var(--bb8-diameter)) / 2) - 1.688em + 0.188em);
            left: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
            transition: var(--transition);
            z-index: 2;
            transform-style: preserve-3d;
        }

/* Head container with 3D tilt effect */
        .bb8__head-container {
            position: relative;
            transition: var(--transition);
            z-index: 2;
            transform-origin: 1.25em 3.75em;
            transform-style: preserve-3d;
        }

/* BB-8 head with metallic sheen */
        .bb8__head {
            overflow: hidden;
            margin-bottom: -0.188em;
            width: 2.5em;
            height: 1.688em;
            background: 
                linear-gradient(transparent 0.063em, dimgray 0.063em 0.313em, transparent 0.313em 0.375em, var(--accent) 0.375em 0.5em, transparent 0.5em 1.313em, silver 1.313em 1.438em, transparent 1.438em),
                linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
                linear-gradient(-45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
                linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
            border-radius: var(--radius) var(--radius) 0 0;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 0.063em 0.125em gray);
            transform: translateZ(5px);
        }

/* Eye with lens flare effect */
        .bb8__head::before {
            content: "";
            position: absolute;
            width: 0.563em;
            height: 0.563em;
            background: 
                radial-gradient(0.125em circle at 0.25em 0.375em, red, transparent),
                radial-gradient(0.063em circle at 0.375em 0.188em, var(--bb8-bg) 50%, transparent 100%),
                linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
            border-radius: var(--radius);
            top: 0.413em;
            left: 50%;
            transform: translate(-50%);
            box-shadow: 
                0 0 0 0.089em lightgray, 
                0.563em 0.281em 0 -0.148em,
                0.563em 0.281em 0 -0.1em var(--bb8-bg), 
                0.563em 0.281em 0 -0.063em;
            z-index: 1;
            transition: var(--transition);
        }

/* Head details with 3D effect */
        .bb8__head::after {
            content: "";
            position: absolute;
            bottom: 0.375em;
            left: 0;
            width: 100%;
            height: 0.188em;
            background: linear-gradient(
                to right,
                var(--accent) 0.125em,
                transparent 0.125em 0.188em,
                var(--accent) 0.188em 0.313em,
                transparent 0.313em 0.375em,
                var(--accent) 0.375em 0.938em,
                transparent 0.938em 1em,
                var(--accent) 1em 1.125em,
                transparent 1.125em 1.875em,
                var(--accent) 1.875em 2em,
                transparent 2em 2.063em,
                var(--accent) 2.063em 2.25em,
                transparent 2.25em 2.313em,
                var(--accent) 2.313em 2.375em,
                transparent 2.375em 2.438em,
                var(--accent) 2.438em
            );
            transition: var(--transition);
        }

/* Antennas with metallic look */
        .bb8__antenna {
            position: absolute;
            transform: translateY(-90%);
            width: 0.059em;
            border-radius: var(--radius) var(--radius) 0 0;
            transition: var(--transition);
            transform-style: preserve-3d;
        }

.bb8__antenna:nth-child(1) {
            height: 0.938em;
            right: 0.938em;
            background: linear-gradient(#000 0.188em, silver 0.188em);
            transform: translateY(-90%) translateZ(2px);
        }

.bb8__antenna:nth-child(2) {
            height: 0.375em;
            left: 50%;
            transform: translate(-50%, -90%) translateZ(2px);
            background: silver;
        }

/* BB-8 body with 3D rotation */
        .bb8__body {
            width: var(--bb8-diameter);
            height: var(--bb8-diameter);
            background: var(--bb8-bg);
            border-radius: var(--radius);
            position: relative;
            overflow: hidden;
            transition: var(--transition);
            z-index: 1;
            transform: rotate(45deg) translateZ(3px);
            background: 
                linear-gradient(-90deg, var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
                linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
                linear-gradient(to right, transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em),
                linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em);
            background-color: var(--bb8-bg);
            box-shadow: 
                0 5px 15px var(--shadow-color),
                inset 0 0 10px rgba(255,255,255,0.2);
        }

/* Body details */
        .bb8__body::after {
            content: "";
            bottom: 1.5em;
            left: 0.563em;
            position: absolute;
            width: 0.188em;
            height: 0.188em;
            background: rgb(236, 236, 236);
            color: rgb(236, 236, 236);
            border-radius: 50%;
            box-shadow: 
                0.875em 0.938em, 
                0 -1.25em, 
                0.875em -2.125em,
                2.125em -2.125em, 
                3.063em -1.25em, 
                3.063em 0, 
                2.125em 0.938em;
        }

/* Central circle with 3D effect */
        .bb8__body::before {
            content: "";
            width: 2.625em;
            height: 2.625em;
            position: absolute;
            border-radius: 50%;
            z-index: 0.1;
            overflow: hidden;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(1px);
            border: 0.313em solid var(--accent);
            background: 
                radial-gradient(1em circle at center, rgb(236, 236, 236) 50%, transparent 51%),
                radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
                linear-gradient(-90deg, transparent 42%, var(--accent) 42% 58%, transparent 58%),
                linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
            box-shadow: 
                inset 0 0 10px rgba(0,0,0,0.2),
                0 2px 5px var(--shadow-color);
        }

/* Shadow with perspective */
        .bb8__shadow {
            width: var(--bb8-diameter);
            height: 20%;
            border-radius: 50%;
            background: #3a271c;
            box-shadow: 0.313em 0 3.125em #3a271c;
            opacity: 0.25;
            position: absolute;
            bottom: 0;
            left: calc((var(--toggle-height) - var(--bb8-diameter)) / 2) - 0.938em);
            transition: var(--transition);
            transform: skew(-70deg) translateZ(-2px);
            z-index: 1;
        }

/* Scenery elements */
        .bb8-toggle__scenery {
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            position: relative;
            border-radius: inherit;
            transform-style: preserve-3d;
        }

.bb8-toggle__scenery::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 30%;
            bottom: 0;
            background: #b18d71;
            z-index: 1;
            transform: translateZ(-1px);
        }

/* Clouds with depth */
        .bb8-toggle__cloud {
            z-index: 1;
            position: absolute;
            border-radius: 50%;
            filter: blur(0.125em);
            transition: var(--transition);
            transform-style: preserve-3d;
        }

.bb8-toggle__cloud:nth-last-child(1) {
            width: 0.875em;
            height: 0.625em;
            filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae) drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
            right: 1.875em;
            top: 2.813em;
            background: linear-gradient(to top right, #ffffffae, #ffffffae);
            transform: translateZ(1px);
        }

.bb8-toggle__cloud:nth-last-child(2) {
            top: 0.625em;
            right: 4.375em;
            width: 0.875em;
            height: 0.375em;
            background: #dfdedeae;
            filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae) drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
            transform: translateZ(0.5px);
        }

.bb8-toggle__cloud:nth-last-child(3) {
            top: 1.25em;
            right: 0.938em;
            width: 0.875em;
            height: 0.375em;
            background: #ffffffae;
            filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae) drop-shadow(-0.625em 0.313em #ffffffae);
            transform: translateZ(0.5px);
        }

/* Mountains with 3D effect */
        .gomrassen, .hermes, .chenini {
            position: absolute;
            border-radius: var(--radius);
            background: linear-gradient(#fff, #6e8ea2);
            top: 100%;
            transform-style: preserve-3d;
            transition: var(--transition);
            box-shadow: 
                0 0 0.188em #ffffff52, 
                0 0 0.188em #6e8ea24b;
        }

.gomrassen {
            left: 0.938em;
            width: 1.875em;
            height: 1.875em;
            transform: translateZ(2px);
        }

.hermes {
            left: 3.438em;
            width: 0.625em;
            height: 0.625em;
            transform: translateZ(1px);
        }

.chenini {
            left: 4.375em;
            width: 0.5em;
            height: 0.5em;
            transform: translateZ(1px);
        }

/* Mountain details */
        .gomrassen::before, .gomrassen::after {
            content: "";
            position: absolute;
            border-radius: inherit;
            box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
            background: rgb(184, 196, 200);
            transform: translateZ(1px);
        }

.gomrassen::before {
            left: 0.313em;
            top: 0.313em;
            width: 0.438em;
            height: 0.438em;
        }

.gomrassen::after {
            width: 0.25em;
            height: 0.25em;
            left: 1.25em;
            top: 0.75em;
        }

/* Tattoine suns */
        .tatto-1, .tatto-2 {
            position: absolute;
            width: 1.25em;
            height: 1.25em;
            border-radius: var(--radius);
            transform-style: preserve-3d;
            transition: var(--transition);
        }

.tatto-1 {
            background: #fefefe;
            right: 3.125em;
            top: 0.625em;
            box-shadow: 0 0 0.438em #fdf4e1;
            transform: translateZ(3px);
        }

.tatto-2 {
            background: linear-gradient(#e6ac5c, #d75449);
            right: 1.25em;
            top: 2.188em;
            box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
            transform: translateZ(2px);
        }

/* Stars with twinkle effect */
        .bb8-toggle__star {
            position: absolute;
            width: 0.063em;
            height: 0.063em;
            background: #fff;
            border-radius: var(--radius);
            filter: drop-shadow(0 0 0.063em #fff);
            color: #fff;
            top: 100%;
            transform-style: preserve-3d;
            animation: twinkle 2s infinite alternate;
        }

@keyframes twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

.bb8-toggle__star:nth-child(1) {
            left: 3.75em;
            box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em, -3.125em 1.875em, 1.25em 2.813em;
            animation-delay: 0.2s;
            transform: translateZ(1px);
        }

.bb8-toggle__star:nth-child(2) {
            left: 4.688em;
            box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em, -3.125em 1.25em, 1.25em -1.563em;
            animation-delay: 0.3s;
            transform: translateZ(0.5px);
        }

.bb8-toggle__star:nth-child(3) {
            left: 5.313em;
            box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
            animation-delay: 0.4s;
            transform: translateZ(0.5px);
        }

/* Checked state transformations */
        .bb8-toggle__checkbox:checked + .bb8-toggle__container {
            background-position-y: 0;
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
            left: calc(100% - var(--bb8-diameter) - (var(--toggle-height) - var(--bb8-diameter)) / 2));
            transform: translateZ(5px);
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
            left: calc(100% - var(--bb8-diameter) - (var(--toggle-height) - var(--bb8-diameter)) / 2) + 0.938em);
            transform: skew(70deg) translateZ(-2px);
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
            transform: rotate(225deg) translateZ(3px);
        }

/* Animation for stars when checked */
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(1) {
            top: 0.625em;
            animation: twinkle 1.5s infinite alternate;
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(2) {
            top: 1.875em;
            animation: twinkle 1.7s infinite alternate;
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(3) {
            top: 1.25em;
            animation: twinkle 1.9s infinite alternate;
        }

/* Hide/show elements when checked */
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
            right: -100%;
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
            top: 0.938em;
            transform: translateZ(3px);
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
            top: 2.5em;
            transform: translateZ(2px);
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
            top: 2.75em;
            transform: translateZ(1px);
        }

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1,
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
            top: 100%;
        }

/* Hover effects */
        .bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
            left: 100%;
        }

.bb8-toggle__checkbox:not(:checked):hover + .bb8-toggle__container .bb8__antenna:nth-child(1) {
            right: 1.5em;
        }

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) {
            left: 0.938em;
        }

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
            background-position: 1.375em 0;
        }

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::before {
            left: 0;
        }

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) {
            left: calc(100% - 0.938em);
        }

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
            background-position: -1.375em 0;
        }

/* Active state (clicking) */
        .bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
            transform: rotate(25deg) translateZ(5px);
        }

.bb8-toggle__checkbox:checked:active + .bb8-toggle__container .bb8__head-container {
            transform: rotate(-25deg) translateZ(5px);
        }

/* Reset positions when hovering BB-8 */
        .bb8:hover .bb8__head::before,
        .bb8:hover .bb8__antenna:nth-child(2) {
            left: 50% !important;
        }

.bb8:hover .bb8__antenna:nth-child(1) {
            right: 0.938em !important;
        }

.bb8:hover .bb8__head::after {
            background-position: 0 0 !important;
        }

/* Ambient light effect */
        .ambient-light {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            transition: all 0.5s ease;
            z-index: 0;
        }

/* Control panel */
        .controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 100;
        }

.control-btn {
            padding: 10px 20px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

.control-btn:hover {
            background: rgba(255,255,255,0.2);
        }

/* 3D rotation controls */
        .scene {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
            transition: transform 1s;
        }

/* Responsive adjustments */
        @media (max-width: 768px) {
            .bb8-toggle {
                --toggle-size: 12px;
            }
            
            .controls {
                flex-direction: column;
                bottom: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="scene" id="scene">
        <div class="ambient-light" id="ambientLight"></div>
        <label class="bb8-toggle">
            <input class="bb8-toggle__checkbox" type="checkbox">
            <div class="bb8-toggle__container">
                <div class="bb8-toggle__scenery">
                    <div class="bb8-toggle__star"></div>
                    <div class="bb8-toggle__star"></div>
                    <div class="bb8-toggle__star"></div>
                    <div class="bb8-toggle__star"></div>
                    <div class="bb8-toggle__star"></div>
                    <div class="bb8-toggle__star"></div>
                    <div class="bb8-toggle__star"></div>
                    <div class="tatto-1"></div>
                    <div class="tatto-2"></div>
                    <div class="gomrassen"></div>
                    <div class="hermes"></div>
                    <div class="chenini"></div>
                    <div class="bb8-toggle__cloud"></div>
                    <div class="bb8-toggle__cloud"></div>
                    <div class="bb8-toggle__cloud"></div>
                </div>
                <div class="bb8">
                    <div class="bb8__head-container">
                        <div class="bb8__antenna"></div>
                        <div class="bb8__antenna"></div>
                        <div class="bb8__head"></div>
                    </div>
                    <div class="bb8__body"></div>
                </div>
                <div class="artificial__hidden">
                    <div class="bb8__shadow"></div>
                </div>
            </div>
        </label>
        <div class="controls">
            <button class="control-btn" id="rotateLeft">↻ Rotate Left</button>
            <button class="control-btn" id="rotateRight">↺ Rotate Right</button>
            <button class="control-btn" id="toggleLight">☀ Toggle Light</button>
        </div>
    </div>

animation

Recommended

[javascript] ❍ Circular Animations Set N°2

CSS Floating Interface Animation

Animation

HTML

CSS

JS

Recommended

[javascript] ❍ Circular Animations Set N°2

CSS Floating Interface Animation

Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS