RSK World - Card Flip Effect | 3D Flip, Magnetic, 360° Spin, Glassmorphism | RSK World

3D Flip Magnetic & Tilt Glass & Border Theme & Parallax Vanilla JS

Card Flip Effect is an advanced 3D card flip demo with front and back content. Features: flip axis (Y, X, or both), configurable speed, 3D tilt (low/medium/high), magnetic pull, shine overlay, reflection, glassmorphism on one card, animated gradient border on hover, inner parallax, dark/light theme (localStorage). Single click to flip, double-click for 360° spin; Tab + Enter for keyboard. HTML, CSS, Vanilla JavaScript. By rskworld.in.

If you find this Card Flip Effect project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Card Flip Effect

3D Flip Animation

Flip axis: Vertical (Y), Horizontal (X), or Both (3D). Configurable speed (fast/normal/slow). Front and back faces with backface-visibility: hidden. Body data-axis and data-speed drive CSS transforms.

Flip: rotateY(180deg), rotateX(180deg), or both
Back face pre-rotated; transition-duration from settings
.card-face with .card-front / .card-back
CSS variables: --perspective, --transition-duration, --ease

Project Structure & Files

card-flip-effect/ with index.html (demo page with settings and 3 cards), styles.css (3D flip, tilt, float, theme, glass, reflection), main.js (theme, settings, magnetic, parallax, 360° spin). No build step. Open index.html or serve folder.

card-flip-effect/ – index.html, styles.css, main.js, README.md, LICENSE
No build step – open index.html or static server
Font: Segoe UI, system-ui; no external CSS/JS libs
Zero dependencies; vanilla HTML, CSS, JavaScript

Tilt, Magnetic & Parallax

3D tilt from mouse position (low/medium/high intensity). Magnetic pull: card follows cursor (--magnetic-x/y, max 12px). Inner parallax on cards with .card-inner-parallax (--parallax-x/y, max 8px).

Tilt: --tilt-x, --tilt-y from cursor vs card center
Magnetic: translate(magnetic-x, magnetic-y) on wrapper
Parallax: inner content moves with mouse
Cleared on mouseleave; toggles in Settings panel

Shine, Reflection & Glass

Shine: diagonal gradient overlay on hover (translate sweep). Reflection: blurred pseudo-element under cards. Glassmorphism: .card-glass with backdrop-filter blur and semi-transparent background. Optional gradient border (border-glow, border-animated) on hover.

Shine – linear-gradient sweep, transform on hover
Reflection – .card-reflection with scaleY(-1) and blur
Glass – backdrop-filter: blur(12px), rgba background
Gradient border – mask/composite for animated border

360° Spin & Interactions

Single click toggles flip (class is-flipped). Double-click adds is-spinning for 360° animation (Y, X, or both per axis). Keyboard: Tab to focus, Enter/Space to flip. Float animation when idle; entrance animation with stagger.

Single click – 250ms delay so double-click can cancel
Double-click – spin360 keyframes, animationend removes class
Keyboard – wrapper tabindex="0", keydown Enter/Space
Float – cardFloat keyframes after entrance

What You Get

Static HTML/CSS/JS: card-flip-effect/ folder with index.html, styles.css, main.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – card-flip-effect/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Use Settings to change flip axis, speed, tilt intensity, 3D tilt, magnetic pull, shine, reflection. Hover to flip; double-click for 360°; theme toggle (top-right) for dark/light; preference saved in localStorage.

card-flip-effect/index.html – single demo page with settings
main.js: theme toggle, applySettings(), tilt/magnetic/parallax
Accessibility: aria-labels, focus-visible, keyboard hint
Author: Molla Samser | rskworld.in

Project Features

3D flip (Y/X/both), speed, tilt (low/medium/high), magnetic pull, shine, reflection, glassmorphism, gradient border, inner parallax, dark/light theme, 360° spin, floating idle, reduced-motion support.

Flip & Speed – axis and duration from settings
Tilt, Magnetic, Parallax – mouse-driven CSS variables
Shine, Reflection, Glass – optional visuals
Theme – data-theme, localStorage persistence

Credits & Acknowledgments

Card Flip Effect by RSK World. Advanced 3D card flip with magnetic pull, 360° spin, glassmorphism, and theme for learning CSS 3D transforms and vanilla JS.

Card Flip Effect – 3D flip, magnetic, tilt, glass, theme
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: help@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.