Markdown
A professional, lightweight, and high-performance 3D Touch-Flip Web Component. Create stunning interactive cards that respond to touch gestures and mouse movements with zero dependencies.
Check out the interactive demo here:
👉 Live Demo on JSFiddle
- 🚀 Zero Dependencies: Built with pure Vanilla JavaScript.
- 📱 Mobile Optimized: Smooth 3D rotation with native touch events.
- 🖱️ Mouse Support: Fully interactive with mouse dragging on desktops.
- 🔒 Encapsulated Styles: Uses Shadow DOM to prevent CSS conflicts with your website.
- 🚫 Anti-Selection: Automatically prevents text selection while flipping for a better UX.
If you are using Node.js, React, Vue, or Vite:
Install:
npm install touch-flip-3d-webimport 'touch-flip-3d-web';Add the following script to your HTML <head> section:
<script src="[https://cdn.jsdelivr.net/gh/labsisouleimen/[email protected]/TouchFlip3D.js](https://cdn.jsdelivr.net/gh/labsisouleimen/[email protected]/TouchFlip3D.js)"></script>Simply use the tag. Use the slot="front" and slot="back" attributes to define the sides of your card.
<touch-flip-3d style="width: 380px; height: 240px;">
<div slot="front" style="background: #1e3c72; color: white; border-radius: 15px;">
<h2>Front Card Content</h2>
</div>
<div slot="back" style="background: #2d3436; color: white; border-radius: 15px;">
<h2>Back Card Content</h2>
</div>
</touch-flip-3d>Check out the native version for Android: TouchFlip3D-Android
This project is licensed under the MIT License - meaning you can freely use, modify, and distribute it, provided you give credit to the original author.
**Developed by Souleimen Labsi **