3D Accordion in HTML CSS JavaScript 🔥 | Simple & Smooth Animation #uidesignlearning #frontendcourse

## 🔥 3D Accordion using HTML, CSS & JavaScript (Beginner Friendly)

In this video, I created a **modern 3D Accordion using pure HTML, CSS, and JavaScript** 🚀
This accordion is **lightweight, easy to understand, and perfect for beginners**. No frameworks, no libraries — just clean code.

---

### ✨ Features of This Accordion

* ✅ Only **one item opens at a time**
* ➕ Plus (+) icon rotates to minus (×)
* 🎯 Smooth open/close animation using `max-height`
* 🧊 3D hover effect with depth
* 📱 Fully responsive layout
* 🧠 Simple logic, easy to maintain

---

## 🎨 Main & Useful CSS Properties (Explained)

### 🔹 Base & Layout

* `box-sizing: border-box;`
→ Ensures padding and border are included in width calculations

* `min-height: 100vh;`
→ Makes the layout cover the full viewport height

* `display: flex; justify-content: center; align-items: center;`
→ Centers the accordion on the screen

---

### 🔹 Accordion Container

* `max-width: 480px;`
→ Keeps the accordion responsive on all screen sizes

* `perspective: 1000px;`
→ Enables realistic 3D depth effect

---

### 🔹 3D Card Effect

* `transform-style: preserve-3d;`
→ Allows child elements to maintain 3D transformations

* `transform: translateY(-6px) rotateX(2deg);`
→ Creates a floating 3D effect on hover

* `box-shadow`
→ Adds depth and card-like appearance

---

### 🔹 Smooth Animation

* `transition: transform 0.4s ease;`
→ Smooth hover animation

* `transition: max-height 0.45s ease;`
→ Smooth accordion open and close

* `overflow: hidden;`
→ Hides extra content when accordion is closed

---

### 🔹 Accordion Open / Close

* `max-height: 0;`
→ Collapsed state of accordion body

* `.item.active .body { max-height: 160px; }`
→ Expanded state when accordion is active

---

### 🔹 Icon Animation

* `transform: rotate(45deg);`
→ Converts plus (+) icon into a close (×) icon

* `transition: transform 0.35s ease;`
→ Smooth icon rotation animation

---

## ⚙️ JavaScript Logic (Simple Explanation)

* document.querySelectorAll(".item")`
→ Selects all accordion items

* addEventListener("click")`
→ Handles click events on accordion headers

* classList.toggle("active")`
→ Opens or closes the clicked accordion item

* classList.remove("active")`
→ Ensures only **one accordion item is open at a time**

---

## 🧠 Why This Accordion is Useful?

* ✔ Beginner-friendly code
* ✔ No heavy JavaScript
* ✔ Interview-ready concept
* ✔ Clean UI with modern effects

---

### 🔖 Hashtags

#HTML #CSS #JavaScript #accordioncover #3DUI #FrontendDevelopment #WebDesign #UIDesign #CodingShorts

Видео 3D Accordion in HTML CSS JavaScript 🔥 | Simple & Smooth Animation #uidesignlearning #frontendcourse канала Design&Media