🎲 3D Rotating Card UI

A visually stunning 3D rotating card built with HTML, CSS, and JavaScript. The card flips on click using CSS 3D transforms, revealing hidden content on the back. Perfect for portfolios, testimonials, pricing cards, flashcards, and more!

---

📑 Table of Contents

• 🎲 3D Rotating Card UI
  • 📑 Table of Contents
  • ✨ Features
  • 🖼 Preview
  • 📁 File Structure
  • 🌐 Live Demo
  • ⚙️ Installation
  • 🚀 Usage
  • 🤝 Contributing
  • 📬 Contact
  • 📄 License

---

✨ Features

• 🌀 Click-to-flip 3D rotating animation
• 🎭 Dual-sided content (front and back)
• 🎨 Stylish gradient background for both sides
• ⚙️ Smooth transitions with preserve-3d effect
• 📱 Responsive, interactive, and lightweight
• 🧠 Built with pure HTML, CSS & JavaScript (no libraries)

---

🖼 Preview

---

📁 File Structure

• index.html: Main HTML structure
• style.css: Styling, gradients, 3D transforms
• script.js: Handles the flip interaction on click

---

🌐 Live Demo

🔗 View Live Demo

---

⚙️ Installation

1. Clone the repository:

   git clone https://github.com/codewithoyem/3d-rotating-card-ui-100daysofcode.git
   cd 3d-rotating-card-ui-100daysofcode
   

2. Open the HTML file:

   open index.html

---

🚀 Usage

1. Open the page in your browser.
2. Click the card to flip it.
3. Click again to flip it back.

You can customize:

• Card content (front/back)
• Background gradients
• Flip direction (Y ↔️ X) in style.css

---

🤝 Contributing

Feel free to fork, improve, or customize!

1. Fork this repository
2. Create a new branch
3. Make your changes
4. Submit a Pull Request

---

📬 Contact

• Created by CODEWITHOYEM
• 📧 mailto:oyem@crisent.com
• 🌐 oyem.crisent.com
• 🐦 @codewithoyem

---

📄 License

This project is licensed under the MIT License and is available for use under the MIT License.