A premium-looking, responsive 3D card built with HTML, CSS, and JavaScript. It tilts toward your cursor/touch, adds parallax depth to content, and renders a glossy glare that follows the pointer — perfect for product cards, portfolio items, or CTAs.
- 🌀 Smooth 3D tilt using pointer position
- 🌊 Parallax depth for image, text, and buttons
- ✨ Dynamic glare highlight that follows the cursor
- 📱 Touch-friendly with graceful fallback
- 🧠 Pure HTML, CSS & JavaScript (no libraries)
index.html: Markup with three demo cards (data-tilt)style.css: 3D styles, parallax layers, glare visuals, responsive gridscript.js: Pointer tracking, physics-like easing, tilt + glare logic
-
Clone the repository:
git clone https://github.com/codewithoyem/3d-tilt-parallax-card-100daysofcode.git cd 3d-tilt-parallax-card-100daysofcode -
Open the HTML file:
open index.html
- Open the page and hover or touch a card.
- The card tilts up to ±12°, content pops with parallax, and a glare follows your pointer.
- Duplicate the
<article class="card" data-tilt>...</article>block to add more items.
Customize in script.js:
- MAX_TILT → tilt intensity (degrees)
- GLARE_MOVE → glare travel
- REST_EASE → how springy/smooth the return is
Swap images/text directly in index.html.
Feel free to fork, improve, or customize!
- Fork this repository
- Create a new branch
- Make your changes
- Submit a Pull Request
- Created by CODEWITHOYEM
- 📧 mailto:oyem@crisent.com
- 🌐 oyem.crisent.com
- 🐦 @codewithoyem
This project is licensed under the MIT License and is available for use under the MIT License.