Badger3000onlineRésumé
Experiments
Back to Experiments
Codepen

Tilted 3D Card with Parallax

A 3D interactive card that tilts based on mouse movement.

Published

tilted-3d-card-with-parallax
codepen.io/badger3000/pen/raNEMKj(opens in a new tab)

About this pen

A 3D interactive card that tilts based on mouse movement. The card uses glassmorphism design with a semi-transparent background and blur effects. Different elements are positioned at various depths using CSS transforms, creating a layered parallax effect. The card displays travel content with an image header, text description, author details, tags, and a call-to-action button. JavaScript tracks mouse position to rotate the card on X and Y axes, returning to its default position when the mouse leaves the viewport.

More in Codepen

View all →
Badger3000Kyle's AI
New conversationExplore
Appearance
Kyle RossPrescott, AZ