# CSS Card Parallax with Pointermove and Custom Properties

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

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 is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/jh3yy/status/1987670585133187417): Reusable recipe for interactive depth effects with plain CSS and pointer coordinates

## Related

- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [Flickering Theme Switch with View Transitions and CSS linear()](https://xiry.app/resources/flickering-theme-switch-with-view-transitions-and-css-linear): CSS technique for flickering theme transitions using View Transitions and linear() curves (Tip, Free)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium)
- [GSAP](https://xiry.app/resources/gsap): High-performance JavaScript animation library for web elements, SVG, and canvas. (Website, Freemium)

Updated 11 October 2026. Page: https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.