3D Card Hover Animation

AI Overview: 3D Card Hover Animation

This project is an interactive product showcase that features 3D keyboard models embedded within stylish UI cards. Its main purpose is to demonstrate how 3D assets can be integrated into a web interface to create a premium, tactile feel. Users can hover over each card to see the 3D model shift its perspective and click on color swatches to change the keyboard's appearance in real-time.

The project relies on the <model-viewer> web component to render 3D files (.glb) directly in the browser. Each card is structured with an "overflow" container that holds the 3D model and a "glass" layer that uses complex CSS blurring to create a frosted-glass depth effect. This makes the keyboards appear as if they are sitting inside a physical display case.

<model-viewer src="https://assets.codepen.io/3421562/leaves_keyboard.glb" shadow-intensity="0.4"></model-viewer>

The HTML uses the model-viewer component to load and display 3D keyboard assets with realistic shadows.

The interactivity is driven by JavaScript, which listens for mouse movements. When a user hovers over a card, the script dynamically updates the camera's "orbit" and "target" attributes. This creates a smooth transition from a static view to a dynamic, zoomed-in angle, giving the user a better look at the 3D object's details.

card.addEventListener('mouseenter', () => applyOrbit(modelViewer, hoverOrbit, hoverTarget));
card.addEventListener('mouseleave', () => applyOrbit(modelViewer, defaultOrbit, defaultTarget));

These event listeners trigger a camera movement whenever the user's mouse enters or leaves the card area.

To handle customization, the project uses a clever CSS trick. Instead of loading a new 3D model for every color, a JavaScript function applies a hue-rotate filter to the existing model. This allows the same asset to change colors instantly based on the user's selection from the color palette.

function changeModelStyle(element, deg, invert = 0) {
  if (modelViewer) { modelViewer.style.filter = `hue-rotate(${deg}deg) invert(${invert})`; }
}

This function changes the visual style of the 3D model by shifting its colors using CSS filters.

Finally, the visual polish is achieved through advanced CSS. The "gradient-blur" effect uses multiple layered div elements with backdrop-filter and mask properties. This creates a sophisticated transition where the bottom of the card looks like blurred glass, while the top remains sharp, enhancing the 3D "pop-out" effect.

.gradient-blur>div {
    backdrop-filter: blur(4px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--p4), rgba(0, 0, 0, 1) var(--p5));
}

The CSS uses backdrop filters and linear masks to create a realistic, progressive blur effect on the card.