Add depth and movement to your UI with these JavaScript tilt effects. This collection features interactive elements that respond to mouse or device motion, creating parallax-style 3D tilts, hover-based animations, and immersive feedback for cards, images, and UI blocks.
14 JavaScript Tilt Effects
3D Tilt Mobile Navigation
demo & codeThis 3D Tilt Mobile Navigation concept adds a tactile, physical feel to mobile app menus. Unlike standard flat navigations, this component utilizes CSS perspective to “tilt” the entire menu bar towards the user’s touch point, simulating a floating surface. It pairs this effect with delightful SVG icon micro-interactions and a “fly-out” card transition for the content area, creating a highly polished, app-like experience on the web.
3D Tilt Maze Game
demo & codeThis 3D Tilt Maze Game recreates the classic wooden labyrinth toy using web technologies. By combining CSS perspective with JavaScript keyboard events, it simulates a physical board that tilts to roll a ball. The game includes a rudimentary physics engine for ball movement and wall collision, complete with multiple levels generated from array maps.
Original vs. Negative Card (Hover and Drag)
A tactile 3D comparison card where the slider reveals image states via blend modes, with smart label occlusion logic.
See the Pen Original vs. Negative Card (Hover and Drag).
3D Glowing Button with CSS
A futuristic 3D button constructed from CSS-transformed planes to form a cube. JavaScript tracks mouse movement to apply dynamic rotateX/Y transforms for a tilt effect, while CSS keyframes animate a neon gradient glow and blur that activates on hover.
See the Pen 3D Glowing Button with CSS.
Amateur Radio Badge 3D
A highly sophisticated holographic badge simulation utilizing CSS 3D transforms and layered mix-blend-mode effects. JavaScript tracks mouse movement to dynamically update CSS variables, driving complex parallax shifts, lighting gradients, and SVG-masked glares for a realistic, tactile depth experience.
See the Pen Amateur Radio Badge 3D.
Glowing Tabs
A navigation menu leveraging CSS Houdini API to animate custom variables for smooth transitions. JavaScript calculates element geometry to drive a dynamic “glowing” background that slides between tabs, while CSS gradients and the :has() selector create a polished, depth-rich visual style.
See the Pen Glowing Tabs.
Interactive 3D Tilt Hover Effect
An interactive 3D card selector featuring a dynamic parallax effect where cards rotate in perspective based on mouse coordinates. JavaScript calculates angular transforms and constraints for a ‘chef’ character that playfully follows the cursor along the card’s axis.
See the Pen Interactive 3D Tilt Hover Effect.
Control Interaction with GSAP
A sleek, animated segmented control using GSAP for smooth slide and a subtle 3D-like tilt effect on click, providing a polished micro-interaction.
See the Pen Control Interaction with GSAP.
Cards with Parallax Tilt Effect
Dive into a stunning card effect utilizing CSS 3D transforms and precise mouse tracking to create a realistic, multi-layered depth and parallax illusion on hover.
See the Pen Cards with Parallax Tilt Effect.
