3D Hover Effect Cards

Immersive 3D Hover Effects

Experience depth and dimension with these stunning 3D hover effects. These cards use perspective, rotation, and shadow techniques to create realistic 3D transformations.

Tilt Effect

This card tilts in response to cursor position, creating a dynamic 3D effect.

Perspective Flip

Demonstrates a stronger perspective transformation on hover.

Depth Shadow

Uses dynamic shadows to enhance the 3D appearance.

Floating Effect

Card appears to float off the page with subtle 3D perspective.

Parallax Layers

Multiple layers move at different speeds for a parallax effect.

Dynamic Rotation

Card rotates based on mouse movement for interactive 3D effect.

How to Create 3D Hover Effects


                .hover-card-3d {
                    height: 280px;
                    background: rgba(26, 32, 53, 0.7);
                    border-radius: 15px;
                    overflow: hidden;
                    position: relative;
                    transition: all 0.4s ease;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    transform-style: preserve-3d;
                    perspective: 1000px;
                }

                .hover-card-3d:hover {
                    transform: rotateY(10deg) rotateX(5deg);
                    box-shadow: -20px 20px 30px rgba(0, 0, 0, 0.3);
                }

                /* For dynamic mouse-based rotation */
                document.querySelectorAll('.hover-card-3d').forEach(card => {
                    card.addEventListener('mousemove', function(e) {
                        const rect = card.getBoundingClientRect();
                        const x = e.clientX - rect.left;
                        const y = e.clientY - rect.top;
                        
                        const xRotation = ((y - rect.height / 2) / rect.height) * 20;
                        const yRotation = ((x - rect.width / 2) / rect.width) * -20;
                        
                        card.style.transform = `perspective(1000px) rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
                    });
                });