🎡 Orbit3D: Dynamic Carousel & Spatial CSS Orchestration

"A high-performance 3D photo carousel exploring CSS perspective, rotational matrices, and interactive spatial transitions."

Visual depth defines modern web experiences. This project is a technical deep dive into Non-Linear UI Motion, utilizing CSS transform-style: preserve-3d to create a seamless, rotating gallery. By manipulating the Z-axis, I implemented a spatial layout where elements interact dynamically with the user's viewport.

---

🚀 Engineering Mindset

This carousel focuses on Geometric Rendering & Motion:

• 3D Transform Matrices: Utilizing rotateY and translateZ properties to position elements in a virtual 3D space.
• Perspective Management: Implementing perspective on the parent container to simulate depth and realistic visual scaling.
• Keyframe Synchronization: Orchestrating smooth, continuous animations that handle state changes (like hover-to-pause) without frame drops.
• Hardware Acceleration: Leveraging GPU-optimized CSS properties to ensure 60fps performance even during complex rotations.

🌟 Key Features

• Spatial Carousel Logic: A rotating interface that provides a unique way to display multi-media content.
• Fluid 3D Transitions: Smooth entry/exit animations for each photo within the 360-degree orbit.
• Interactive UX: Dynamic feedback loops that react to user focus, enhancing engagement through depth.

🔧 Technical Stack

• HTML5: Structured DOM elements for efficient 3D mapping.
• CSS3: Advanced usage of preserve-3d, backface-visibility, and cubic-bezier timing functions.

📸 Visual Showcase

---

🛠️ Installation & Usage

1. Clone the repository:

   git clone [https://github.com/emineugurlu/CSS-SLIDER.git](https://github.com/emineugurlu/CSS-SLIDER.git)

2. Open the Project:

   cd CSS-SLIDER
   open index.html
   

Developed by Emine Uğurlu with a focus on 3D CSS physics and interactive UI.