Interactive 3D Perspective Tilt Card with Parallax Depth
Pure HTML5, CSS3 & Vanilla JS 3D parallax tilt card with mouse tracking physics, gradient border mask, and translateZ text elevation
A high-end 3D tilt card component with realistic parallax depth. Calculates normalized cursor vectors relative to the container bounding box to execute smooth, angle-clamped 3D rotation (`rotateX`, `rotateY`, `scale3d`). Includes multi-plane z-axis elevation (`transform: translateZ(20px)`), an atmospheric bottom dark gradient overlay, and a gradient glow border mask.
Preview
Source code — unlock now
Get the full, commented source with copy, .html and PDF download.
Digital product, delivered instantly. No refunds once the code is unlocked or downloaded. See our Snippet Terms.
Support the Code Library
These previews are free to browse. If a snippet saved you time, a coffee helps keep new ones coming.
Built by Cardly NFC Scanner
Turn your phone into a digital business card and read, write or erase NFC tags yourself — plus a full toolkit of free browser tools.
Feedback
Spotted a bug or have a request for this snippet? Let us know.