3D Box Loading Animation

:root {
            --size: 40px;
            --entry-speed: 0.6s;
            --pause-before-spin: 3s;
        }

body {
            margin: 0;
            padding: 0;
            background: #050505;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

/* The 3D Perspective Container */
        .scene {
            width: var(--size);
            height: var(--size);
            perspective: 1000px;
        }

/* The Cube Wrapper */
        .cube-assembly {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            /* Animation starts after all 6 faces have arrived (approx 3s) */
            animation: rotateCube 10s infinite linear var(--pause-before-spin);
        }

/* Base Face Styles */
        .face {
            position: absolute;
            width: var(--size);
            height: var(--size);
            opacity: 0;
            border: 2px solid rgba(255, 255, 255, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            animation: assemble var(--entry-speed) forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

/* Internal Loading Text */
        .loading-text {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 14px;
            font-weight: 900;
            letter-spacing: 2px;
            opacity: 0;
            text-shadow: 0 0 10px rgba(255,255,255,0.8);
            animation: fadeIn 1s forwards 2.6s;
            /* Ensures text stays in the center of the 3D space */
            transform: translateZ(0); 
        }

/* Individual Side Logic: Delay + Target Position + Color */
        .front  { 
            background: rgba(255, 87, 51, 0.6); 
            box-shadow: inset 0 0 30px #ff5733;
            animation-delay: 0.0s; 
            --target: rotateY(0deg) translateZ(60px); 
        }
        .back   { 
            background: rgba(51, 255, 87, 0.6); 
            box-shadow: inset 0 0 30px #33ff57;
            animation-delay: 0.4s; 
            --target: rotateY(180deg) translateZ(60px); 
        }
        .right  { 
            background: rgba(51, 87, 255, 0.6); 
            box-shadow: inset 0 0 30px #3357ff;
            animation-delay: 0.8s; 
            --target: rotateY(90deg) translateZ(60px); 
        }
        .left   { 
            background: rgba(255, 51, 236, 0.6); 
            box-shadow: inset 0 0 30px #ff33ec;
            animation-delay: 1.2s; 
            --target: rotateY(-90deg) translateZ(60px); 
        }
        .top    { 
            background: rgba(255, 241, 51, 0.6); 
            box-shadow: inset 0 0 30px #fff133;
            animation-delay: 1.6s; 
            --target: rotateX(90deg) translateZ(60px); 
        }
        .bottom { 
            background: rgba(51, 255, 241, 0.6); 
            box-shadow: inset 0 0 30px #33fff1;
            animation-delay: 2.0s; 
            --target: rotateX(-90deg) translateZ(60px); 
        }

/* Keyframes */
        @keyframes assemble {
            0% { 
                opacity: 0; 
                transform: scale(0) translateZ(500px) rotateX(180deg); 
            }
            100% { 
                opacity: 1; 
                transform: var(--target); 
            }
        }

@keyframes rotateCube {
            from { transform: rotateX(0deg) rotateY(0deg); }
            to { transform: rotateX(360deg) rotateY(720deg); }
        }

@keyframes fadeIn {
            to { opacity: 1; }
        }

- 3D Box Loading Animation

Live Preview