Holographic 3D Interactive Card

This Holographic 3D Interactive Card is a premium UI component inspired by rare physical trading cards. It features a sophisticated depth effect where the logo floats independently from the iridescent background, reacting dynamically to mouse movements or touch input. The use of modern CSS APIs ensures high-performance rendering of complex gradients and masks, creating a truly immersive “collectible” feel for digital assets.

Core Technique

The implementation relies on the synergy between JavaScript Pointer Events and the CSS Houdini (@property) API. JavaScript tracks the pointer’s position relative to the card’s center using getBoundingClientRect, converting coordinates into a normalized ratio between -1 and 1. These values are then passed to CSS custom properties (--ratio-x, --ratio-y).

In CSS, the transform-style: preserve-3d property is applied to the container, allowing child elements to exist in 3D space. The “holographic” shimmer is achieved by stacking multiple layers: a base iridescent radial gradient (.holo-bg) and a shimmering line pattern (.holo-lines) that uses mask-image. By multiplying the --ratio variables with transform values, the gradients and the logo shift at different speeds, creating a parallax effect that mimics light hitting a physical foil surface.

Customization

The core configuration is handled through the registered @property blocks, which allow for smooth CSS transitions of numeric values.

/* Update the tilt intensity in the .card selector */
.card {
  /* Increase 20deg to 45deg for a more dramatic tilt */
  transform: rotateY(calc(-20deg * var(--ratio-x)))
             rotateX(calc(20deg * var(--ratio-y)));
}

/* Customize the logo float depth */
.logo:after {
  /* Change 0.5rem to increase/decrease the parallax distance */
  transform: translateZ(0.5rem) 
             translate(calc(var(--ratio-x) * -1rem), calc(var(--ratio-y) * -1rem));
}

Tips

1. CSS @property for Animation: Using @property is essential here because it tells the browser how to interpolate custom properties. Without it, the browser treats --ratio-x as a string, and you wouldn’t get smooth transitions when the pointer leaves the card.

2. Performance Hint: Since the card recalculates styles on every frame during movement, consider adding will-change: transform to the .card and .holo-bg elements if you notice stuttering on high-resolution displays.