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.

Preview project

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.

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.

Technologies used in the project:

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

• 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.

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.

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.

This project is available under the MIT License.