3D Parallax Hover Card

This 3D Parallax Hover Card creates a premium, tactile feel by mimicking physical depth on a flat screen. As the user moves their cursor over the card, it tilts along the X and Y axes to face the mouse, while the background image shifts in the opposite direction. This compound movement creates a convincing “window” effect, making the content appear to float above the background.

Core Technique

The effect relies on mapping the mouse coordinates relative to the card’s center to CSS transform properties.

1. Coordinate Mapping (Vue Logic)

The component tracks the mousemove event. It calculates the cursor’s position relative to the center of the card element. These values are normalized to a small range (e.g., -0.5 to 0.5) to determine the “intensity” of the tilt.

// Calculate mouse position relative to the center of the card
handleMouseMove(e) {
  this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2;
  this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2;
},

2. The 3D Tilt (Computed Styles)

The computed property cardStyle converts these coordinates into degrees. Notice how the Y-axis mouse movement controls the X-axis rotation (rotateX), and vice-versa. This perpendicular mapping is essential for natural 3D rotation.

cardStyle() {
  const rX = this.mousePX * 30; // Max 30deg tilt
  const rY = this.mousePY * -30;
  return {
    transform: `rotateY(${rX}deg) rotateX(${rY}deg)`
  };
}

3. Background Parallax

To enhance depth, the background layer (.card-bg) is transformed separately. While the card rotates, the background translates (translateX/Y). The CSS ensures the background is slightly larger than the container (via negative positioning) so that moving it doesn’t reveal empty edges.

cardBgTransform() {
  // Move background opposing the mouse to create depth
  const tX = this.mousePX * -40; 
  const tY = this.mousePY * -40;
  return {
    transform: `translateX(${tX}px) translateY(${tY}px)`
  };
}

Browser Support

The component relies on CSS 3D Transforms and Vue.js. It works in all modern browsers.