Published on: August 3, 2025

Soda Can Spin Animation in CSS and JavaScript

Learn how to create a stunning soda can spin animation using pure CSS and JavaScript! 🥤💻 Whether you're a beginner or an animation enthusiast, this tutorial will show you step-by-step how to make a 3D spinning soda can that looks awesome on any website or project.

What you'll learn:

How to design a soda can using HTML and CSS
How to animate the can to spin smoothly
3D rotation effects with transform and keyframes
Optional interactivity with JavaScript

Perfect for portfolios, product showcases, or fun web experiments.

Code Preview from the Tutorial

Here's a sample of the code you'll learn in this tutorial:

HTML

CSS

JavaScript

                <!-- Soda Can Container -->

                <div class="soda-can">

                  <div class="can-body"></div>

                  <div class="can-top"></div>

                  <div class="can-label">Cola</div>

                </div>
              
                .soda-can {

                  position:
                relative;

                  width:
                100px;

                  height:
                200px;

                  transform-style:
                preserve-3d;

                  animation:
                spin 5s infinite linear;

                }

                @keyframes spin {

                  from {
                transform:
                rotateY(0deg); }

                  to {
                transform:
                rotateY(360deg); }

                }
              
                // Optional interactive spin control

                const sodaCan =
                document.querySelector('.soda-can');

                sodaCan.addEventListener('mousemove', (e) => {

                  const rotation =
                e.clientX
                / 10;

                  sodaCan.style.transform =
                `rotateY(${rotation}deg)`;

                });