3D Concept

admin1234
Feb 09, 2026 14
Live Preview

Live Editor

   <!-- Animated Background -->
    <div class="bg-animated">
        <div class="bg-gradient"></div>
        <div class="bg-radial"></div>
    </div>

    <!-- Card Container -->
    <div class="card-container">
        <div class="card" id="card">
            <!-- Card Base with Effects -->
            <div class="card-base">
                <!-- Holographic Overlay -->
                <div class="holographic-overlay" id="holoOverlay"></div>

                <!-- Particles Container -->
                <div id="particlesContainer"></div>

                <!-- Mesh Gradient -->
                <div class="mesh-gradient"></div>

                <!-- Scan Line -->
                <div class="scan-line"></div>
            </div>

            <!-- Content -->
            <div class="card-content">
                <div class="icon">◆</div>
                <h2 class="title">NEXUS</h2>
                <div class="divider"></div>
                <p class="subtitle">Advanced 3D Experience</p>

                <!-- Corner Accents -->
                <div class="corner corner-tl"></div>
                <div class="corner corner-tr"></div>
                <div class="corner corner-bl"></div>
                <div class="corner corner-br"></div>
            </div>

            <!-- Edge Glow -->
            <div class="edge-glow"></div>
        </div>
    </div>
     * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            overflow: hidden;
            font-family: system-ui, -apple-system, sans-serif;
        }

        /* Animated background */
        .bg-animated {
            position: absolute;
            inset: 0;
            opacity: 0.3;
        }

        .bg-gradient {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, 
                rgba(6, 182, 212, 0.2) 0%,
                rgba(168, 85, 247, 0.2) 50%,
                rgba(236, 72, 153, 0.2) 100%);
        }

        .bg-radial {
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(239, 68, 68, 0.3), transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.3), transparent 50%);
            background-size: 200% 200%;
            animation: bgMove 20s ease-in-out infinite alternate;
        }

        @keyframes bgMove {
            0% { background-position: 0% 0%; }
            100% { background-position: 100% 100%; }
        }

        /* Card container */
        .card-container {
            perspective: 1500px;
            position: relative;
        }

        .card {
            width: 300px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.1s ease-out;
            cursor: pointer;
        }

        /* Glass morphism base */
        .card-base {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.1) 0%, 
                rgba(255, 255, 255, 0.05) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            overflow: hidden;
        }

        /* Holographic gradient overlay */
        .holographic-overlay {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, 
                rgba(0, 255, 255, 0.4) 0%,
                rgba(138, 43, 226, 0.4) 25%,
                rgba(255, 20, 147, 0.4) 50%,
                rgba(255, 215, 0, 0.4) 75%,
                transparent 100%);
            opacity: 0.3;
            mix-blend-mode: screen;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .card:hover .holographic-overlay {
            animation: holoPulse 2s ease-in-out infinite;
        }

        @keyframes holoPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        /* Particles */
        .particle {
            position: absolute;
            border-radius: 50%;
            background: white;
            filter: blur(1px);
            pointer-events: none;
        }

        @keyframes particleFloat {
            0%, 100% {
                transform: translateY(0);
                opacity: 0;
                scale: 0;
            }
            50% {
                opacity: 1;
                scale: 1;
            }
        }

        /* Mesh gradient animation */
        .mesh-gradient {
            position: absolute;
            inset: 0;
            opacity: 0.4;
            animation: meshMove 8s ease-in-out infinite alternate;
        }

        @keyframes meshMove {
            0% {
                background: 
                    radial-gradient(at 0% 0%, rgba(6, 182, 212, 0.3) 0px, transparent 50%),
                    radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.3) 0px, transparent 50%),
                    radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.3) 0px, transparent 50%),
                    radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.3) 0px, transparent 50%);
            }
            100% {
                background: 
                    radial-gradient(at 0% 0%, rgba(168, 85, 247, 0.3) 0px, transparent 50%),
                    radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.3) 0px, transparent 50%),
                    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.3) 0px, transparent 50%),
                    radial-gradient(at 0% 100%, rgba(6, 182, 212, 0.3) 0px, transparent 50%);
            }
        }

        /* Scan line effect */
        .scan-line {
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
            pointer-events: none;
            animation: scanMove 3s linear infinite;
        }

        @keyframes scanMove {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(200%); }
        }

        /* Content */
        .card-content {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 32px;
            color: white;
            transform: translateZ(50px);
        }

        /* Floating icon */
        .icon {
            font-size: 72px;
            margin-bottom: 24px;
            transform: translateZ(60px);
            animation: iconFloat 2s ease-in-out infinite;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
        }

        .card:hover .icon {
            animation: iconFloat 2s ease-in-out infinite, iconGlow 1.5s ease-in-out infinite;
        }

        @keyframes iconFloat {
            0%, 100% { transform: translateZ(60px) translateY(0) rotate(0deg); }
            25% { transform: translateZ(60px) translateY(-10px) rotate(5deg); }
            75% { transform: translateZ(60px) translateY(-10px) rotate(-5deg); }
        }

        @keyframes iconGlow {
            0%, 100% {
                filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
                transform: scale(1);
            }
            50% {
                filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
                transform: scale(1.1);
            }
        }

        /* Title with chromatic aberration */
        .title {
            font-size: 32px;
            font-weight: 900;
            text-align: center;
            margin-bottom: 12px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            transform: translateZ(40px);
            text-shadow: 1px 1px 0px rgba(255, 0, 255, 0.3), -1px -1px 0px rgba(0, 255, 255, 0.3);
        }

        .card:hover .title {
            animation: chromaticAberration 1s ease-in-out infinite;
        }

        @keyframes chromaticAberration {
            0%, 100% {
                text-shadow: 2px 2px 0px rgba(255, 0, 255, 0.5), -2px -2px 0px rgba(0, 255, 255, 0.5);
            }
            50% {
                text-shadow: 3px 3px 0px rgba(255, 0, 255, 0.7), -3px -3px 0px rgba(0, 255, 255, 0.7);
            }
        }

        /* Animated line */
        .divider {
            width: 96px;
            height: 2px;
            background: linear-gradient(to right, transparent, #06b6d4, transparent);
            margin-bottom: 12px;
            transform: translateZ(35px);
            opacity: 0.5;
        }

        .card:hover .divider {
            animation: dividerPulse 1.5s ease-in-out infinite;
        }

        @keyframes dividerPulse {
            0%, 100% {
                transform: translateZ(35px) scaleX(1);
                opacity: 0.5;
            }
            50% {
                transform: translateZ(35px) scaleX(1.5);
                opacity: 1;
            }
        }

        /* Subtitle with glitch effect */
        .subtitle {
            font-size: 12px;
            text-align: center;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            opacity: 0.8;
            transform: translateZ(30px);
            font-family: monospace;
        }

        .card:hover .subtitle {
            animation: glitch 0.2s steps(2) infinite 1s;
        }

        @keyframes glitch {
            0%, 100% {
                transform: translateZ(30px) translateX(0);
                opacity: 0.8;
            }
            25% {
                transform: translateZ(30px) translateX(-1px);
                opacity: 0.6;
            }
            50% {
                transform: translateZ(30px) translateX(1px);
                opacity: 0.8;
            }
            75% {
                transform: translateZ(30px) translateX(-1px);
                opacity: 0.6;
            }
        }

        /* Corner accents */
        .corner {
            position: absolute;
            width: 24px;
            height: 24px;
            border: 2px solid #06b6d4;
            transform: translateZ(45px);
            opacity: 0.3;
        }

        .corner-tl {
            top: 20px;
            left: 20px;
            border-bottom: none;
            border-right: none;
        }

        .corner-tr {
            top: 20px;
            right: 20px;
            border-bottom: none;
            border-left: none;
        }

        .corner-bl {
            bottom: 20px;
            left: 20px;
            border-top: none;
            border-right: none;
        }

        .corner-br {
            bottom: 20px;
            right: 20px;
            border-top: none;
            border-left: none;
        }

        .card:hover .corner {
            animation: cornerPulse 1.5s ease-in-out infinite;
        }

        .card:hover .corner-tr { animation-delay: 0.2s; }
        .card:hover .corner-bl { animation-delay: 0.4s; }
        .card:hover .corner-br { animation-delay: 0.6s; }

        @keyframes cornerPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        /* Edge glow */
        .edge-glow {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            pointer-events: none;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
            transition: box-shadow 0.3s ease;
        }

        .card:hover .edge-glow {
            animation: edgeGlow 2s ease-in-out infinite;
        }

        @keyframes edgeGlow {
            0%, 100% {
                box-shadow: 
                    0 0 40px rgba(0, 255, 255, 0.5),
                    0 0 80px rgba(138, 43, 226, 0.3);
            }
            50% {
                box-shadow: 
                    0 0 60px rgba(138, 43, 226, 0.6),
                    0 0 100px rgba(0, 255, 255, 0.4);
            }
        }
  const card = document.getElementById('card');
        const holoOverlay = document.getElementById('holoOverlay');
        const particlesContainer = document.getElementById('particlesContainer');

        // Create particles
        function createParticles() {
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const x = Math.random() * 300;
                const y = Math.random() * 300;
                const size = Math.random() * 4 + 1;
                const delay = Math.random() * 2;
                const duration = Math.random() * 3 + 2;
                
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.width = size + 'px';
                particle.style.height = size + 'px';
                particle.style.animation = `particleFloat ${duration}s ease-in-out infinite ${delay}s`;
                
                particlesContainer.appendChild(particle);
            }
        }

        createParticles();

        // 3D rotation on mouse move
        let mouseX = 0;
        let mouseY = 0;
        let currentX = 0;
        let currentY = 0;

        card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;

            mouseX = (x / rect.width) * 50;
            mouseY = (y / rect.height) * 50;

            // Update holographic overlay position
            const percentX = ((e.clientX - rect.left) / rect.width) * 100;
            const percentY = ((e.clientY - rect.top) / rect.height) * 100;
            
            holoOverlay.style.background = `radial-gradient(circle at ${percentX}% ${percentY}%, 
                rgba(0, 255, 255, 0.4) 0%,
                rgba(138, 43, 226, 0.4) 25%,
                rgba(255, 20, 147, 0.4) 50%,
                rgba(255, 215, 0, 0.4) 75%,
                transparent 100%)`;
        });

        card.addEventListener('mouseleave', () => {
            mouseX = 0;
            mouseY = 0;
        });

        // Smooth animation loop
        function animate() {
            // Smooth interpolation
            currentX += (mouseX - currentX) * 0.1;
            currentY += (mouseY - currentY) * 0.1;

            const rotateY = currentX * 0.5;
            const rotateX = -currentY * 0.5;

            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1)`;

            requestAnimationFrame(animate);
        }

        animate();

        // Hover scale effect
        card.addEventListener('mouseenter', () => {
            card.style.transform = `rotateX(${-currentY * 0.5}deg) rotateY(${currentX * 0.5}deg) scale(1.02)`;
        });

        card.addEventListener('mouseleave', () => {
            card.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)';
        });
Categories

3D Concept

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
