Coca Cola Can 3D Rotation

A single-page website showcasing an advertisement for 3D rotating Coca Cola can using CSS and HTML.

Screenshot

For a better and proper view of the website, please press F11 or Fn + F11 to enter full-screen mode. This will allow you to see the 3D rotation effect in its entirety and without any distractions.

Overview

This project uses CSS transforms and animations to create a 3D rotating effect on a Coca Cola can. The can rotates on hover, giving a realistic 3D effect.

Features

3D rotation of Coca Cola can on hover

Responsive design for various screen sizes>

Simple and clean HTML structure

CSS-only animation for a seamless user experience

Technologies Used

HTML5

CSS3

No JavaScript used

How to Use

Clone this repository or download the zip file.

Open the index.html file in a web browser to view the 3D rotating Coca Cola can.

Hover over the can to see the 3D rotation effect.

Device Support

Note: This project is currently optimized for desktop and laptop devices only. While it may work on mobile devices, the experience may not be ideal due to the complexity of the 3D animation. I plan to optimize the project for mobile devices in future updates.

Browser Support

This project has been tested on the following browsers:

Google Chrome (latest version

Mozilla Firefox (latest version)

Safari (latest version)

Microsoft Edge (latest version

Acknowledgments

Coca Cola logo and branding used for demonstration purposes only.

Inspired by various online tutorials and examples of 3D CSS transformations.

Author

Umesh Joshi (Ralph)

You can replace (Ralph) with your actual name. Also, make sure to update the styles.css file and index.html file paths if they are different in your project.