3D Revolving Carousel

A visually engaging 3D carousel built with HTML and SCSS featuring a smooth revolving effect without any JavaScript. Perfect for e-commerce stores, portfolios, corporate websites, photography, and more, this carousel brings an interactive touch to your web projects.

🚀 Demo

Preview project

🧐 Features

Here're some of the project's best features:

• 3D Rotating Effect: Uses only HTML and CSS to create a revolving carousel that rotates around a central axis.
• Customizable Design: Easily change colors sizes and rotation speeds to fit your project's theme.
• Versatile Use Cases: Ideal for displaying products projects testimonials images or stats in an interactive way.

🛠️ Installation Steps:

1. Clone the repository:

git clone https://github.com/chriskript/3d-carousel.git

2. Change into project directory

cd 3d-carousel

3. Compile SCSS to CSS (if not already done)

sass styles.scss styles.css

3. Open the index.html file in your preferred web browser to view and interact with the game.

💻 Built with

Technologies used in the project:

• HTML
• SCSS (Sass) for styling
• CSS (compiled from SCSS)

👩🏻‍💻 Usage

• Product Display: E-commerce stores can showcase featured products.
• Portfolio Projects: Creatives can display their work or project snapshots.
• Corporate Sites: Use for client logos, services, or testimonials.
• Photography/Art Websites: Display art pieces or photo galleries.
• Education & Stats: Visualize educational content or interactive data.

🎨 Customization

To customize the carousel:

• Adjust the colors of each rectangle in styles.scss under .rectangle:nth-child().
• Change the rotation speed by modifying the @keyframes spin animation duration.
• Customize dimensions and spacing to fit your layout.
• Modify the SCSS variables for box shadow and color schemes to match your theme.

💡 SCSS to CSS Compilation

1. Install Sass (if you don't already have it installed):

npm install -g sass

2. Compile SCSS to CSS:

sass styles.scss styles.css

This will convert styles.scss into styles.css, which can be linked to your HTML file.

This project uses SCSS for styling, which is a CSS preprocessor that adds useful features like variables, mixins, and nesting.

🛡️ License:

This project is available under the MIT License.