xiry.

Development · Tip

CSS Card Parallax with Pointermove and Custom Properties

CSS recipe for interactive 3D card tilt and 2D layer parallax

From the Xiry library · Updated 11 October 2026

This technique combines JavaScript pointer tracking with CSS custom properties to create layered depth on web cards. As the pointer moves, custom properties drive both a 3D tilt on the container and proportional 2D translations across indexed internal layers. It provides an efficient way to achieve complex interactive visual depth using minimal CSS math.

How it works

CSS card parallax using pointermove and custom properties. Map pointer position to rotate the card in 3D, and translate layered rings in 2D for the illusion of depth.

HTML: <div class="ring" style="--i: 2">

CSS:

.ring {

translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem));

}

Trick: pointer mapping drives the 3D rotation of the card while each ring layer translates in 2D proportional to its --i index, producing parallax depth. The demo includes a config panel (rotation, y(deg), x(deg), dist(rem), debug mode, light/dark theme) and a debug view showing the pointer hit area and coordinate mapping.

What it's for

  • Create interactive hover effects for hero cards or pricing tiers
  • Add layered parallax depth to digital playing cards or collectible badges
  • Prototype coordinate-mapped pointer animations without heavy animation libraries

Key points

  • Pointer tracking mapped to CSS custom properties (--px and --py)
  • Indexed layer offsets calculated via CSS calc() and custom property multipliers (--i)
  • Simultaneous 3D card rotation and 2D layer translation for an illusion of depth
  • Lightweight implementation relying on native CSS transform and translate properties

Pricing

Free

Details

Type
Tip
Category
Development
Topic
CSS & Animation
Open source
Yes
Platforms
Web
For
Frontend developers and creative web designers
Alternative to
Atropos, Vanilla-tilt.js
Tags
css, animation, parallax, web design, frontend, tips

Why it was saved

  • @jh3yy, 9 November 2025: Reusable recipe for interactive depth effects with plain CSS and pointer coordinates

Related

Updated