TouchFlip3D 🔄

A high-performance, lightweight 3D Flip Card Web Component. Turn Any HTML Content into a High-Performance 3D Flip Card.

✨ The Concept: "Design Anything, We Flip It"

Unlike other libraries that force a specific design, TouchFlip3D acts as a 3D Wrapper. You have 100% control over the CSS and HTML of your cards; our library only handles the physics, touch gestures, and 3D mathematics.

✨ Features

• Zero Dependencies: Pure Vanilla JavaScript.
• Web Component: Encapsulated Styles using Shadow DOM.
• Touch & Mouse Support: Smooth rotation on mobile and desktop.
• Slot System: Complete freedom to design front and back faces.

✨ Why TouchFlip3D?

Most flip-cards are hard to customize. TouchFlip3D is different. It's a Logic Wrapper:

It doesn't style your card (You keep your design).

It only manages the 3D physics (Touch, Swipe, Mouse drag).

It works everywhere: Vanilla JS, React, Vue, Angular.

🚀 Installation

1. Option A Direct Link (No Setup Required)

Perfect for simple projects or quick tests. Just paste this in your :

<script type="module" src="https://unpkg.com/[email protected]/TouchFlip3D.js"></script>

2. Option B NPM (For Modern Projects)

Best for React, Vue, or apps with a build step:

npm install touch-flip-3d-web

1. Import in your JavaScript

import 'touch-flip-3d-web';

🛠 Usage: Infinite Possibilities

To make it work, you only need to use the slot="front" and slot="back" attributes on any element you want. Once installed, just import the library and use the custom tag in your HTML.

Example A: A Simple Glassmorphism Card

<touch-flip-3d style="width: 300px; height: 200px;">
  <div slot="front" style="background: skyblue; border-radius: 20px;">
      <h2>Hello!</h2>
  </div>

  <div slot="back" style="background: rgba(0,0,0,0.8); color: white; border-radius: 20px;">
      <p>I am the back side</p>
  </div>
</touch-flip-3d>

Example B: Professional Product Card (Images + Buttons) Here you can see that you can put Images, Icons, and Forms inside the slots:

<touch-flip-3d style="width: 300px; height: 400px;">
  <img slot="front" src="product.jpg" style="width:100%; border-radius:15px; object-fit:cover;">

  <div slot="back" style="padding: 20px; background: #fff; border: 1px solid #ddd; border-radius:15px;">
      <h3>Awesome Watch</h3>
      <p>Price: $199</p>
      <button>Add to Cart</button>
  </div>
</touch-flip-3d>

⚙️ How it Works?

The Library: Manages rotateX, rotateY, and perspective. It listens to mouse/touch movements to calculate the 3D space.

Your Content: Stays exactly as you styled it. The library doesn't change your colors, fonts, or layout—it only adds the "Magic of 3D".

📜 License

MIT License - Feel free to use it in any project!