Home
Quentin Rivers
Futuristic 3D Tilt Card

Futuristic 3D Tilt Card

Hover to see the 3D effect

This tailwind example is contributed by Quentin Rivers, on 03-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Quentin Rivers

724

Fork Fullscreen

<div class="bg-gray-900 h-screen flex items-center justify-center overflow-hidden">
    <div
        class="tilt-card w-80 h-96 bg-gradient-to-br from-purple-700 to-pink-500 rounded-2xl shadow-2xl relative cursor-pointer transition-all duration-300 ease-out hover:scale-105">
        <div class="glow opacity-0 transition-opacity duration-300"></div>
        <div class="tilt-card-content p-6 flex flex-col h-full justify-between relative z-10">
            <div>
                <h2 class="text-3xl font-bold text-white mb-2">Quantum Leap</h2>
                <p class="text-gray-200">Experience the future of technology with our revolutionary quantum computing
                    solution.</p>
            </div>
            <div class="space-y-4">
                <div class="bg-white bg-opacity-20 rounded-lg p-3">
                    <div class="text-xs text-gray-300 uppercase">Processing Power</div>
                    <div class="text-2xl font-bold text-white">100 Qubits</div>
                </div>
                <button class="w-full py-2 bg-white text-purple-700 rounded-lg font-semibold transform transition hover:scale-105 active:scale-95">
                    Explore Now
                </button>
            </div>
        </div>
    </div>

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

const centerX = rect.width / 2;
            const centerY = rect.height / 2;

const percentX = (x - centerX) / centerX;
            const percentY = -((y - centerY) / centerY);

card.style.transform = `perspective(1000px) rotateY(${percentX * 10}deg) rotateX(${percentY * 10}deg)`;
            content.style.transform = `translateZ(50px)`;
            glow.style.opacity = '1';
            glow.style.backgroundImage = `
                radial-gradient(
                    circle at 
                    ${x}px ${y}px, 
                    #ffffff44,
                    #0000000f
                )
            `;
        });

card.addEventListener('mouseleave', () => {
            card.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
            content.style.transform = 'translateZ(0px)';
            glow.style.opacity = '0';
        });
    </script>
</div>

Related Examples

Feature cards with icons on top

Author:
Manon Daniel

1 year ago

12.9k
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

8 months ago

1.5k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

5 months ago

907
Invoice
Invoice

Author:
Ameth Galarcio

5 months ago

958
Horizontal card with image

Author:
Amit Pachange

2 years ago

11.8k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

1 year ago

11.2k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 month ago

230
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

3 weeks ago

310
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

Author:
Samuel Abera

7 months ago

2.3k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

8 months ago

1.4k
Card with full width image
centered content

Author:
Mr Robot

1 year ago

9k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent