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

2.7k

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

Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

2.5k
Best incamas to date

Author:
ORGIN_DREAMS

6 months ago

695
Brand Grid with Hover Effect

Author:
ariaw

8 months ago

1.2k
Food App Web design

Author:
Aitrik Saha

9 months ago

1.5k
Profile Card
User profile card

Author:
Ajay Thakur

1 month ago

45
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.6k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

10 months ago

1.5k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

3 weeks ago

46
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

4 months ago

862
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.6k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.6k
Feature Section Cards

Author:
Akram Khan

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components