Home
Anonymous
Futuristic 3D Tilt Card

Futuristic 3D Tilt Card

Forked from> @quentin/futuristic-3d-tilt-card

Hover to see the 3D effect

This tailwind example is contributed by Anonymous, on 27-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Anonymous

305

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-100">
        <div class="glow opacity-0 transition-opacity duration-300"></div>
        <div class="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-100 active:scale-100">
                    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 * 15}deg) rotateX(${percentY * 15}deg)`;
            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)';
            glow.style.opacity = '0';
        });
    </script>
</div>

Related Examples

Tailwind CSS Book

Author:
Michael Andreuzza

1 year ago

1.8k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

2 weeks ago

53
card profie
profile card

Author:
Aman kumar

1 year ago

3.6k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

2 months ago

638
Active Beauty Main Page

Author:
Maxim

1 month ago

170
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

9.8k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

1.9k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

1.4k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

11.7k
Beautiful card design with image

Author:
Brandon D

2 years ago

12.3k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

8 months ago

2.7k
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

11 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components