🌀 Building a 3D Rotating Cube for a Shoe Store with HTML & CSS

Have you ever seen those flashy website templates or ad mockups with a rotating 3D cube — each side showing a product?
I saw a few frameworks selling such templates and thought: why not build one myself, from scratch?

So I created a 3D Rotating Cube entirely in HTML, CSS, and a bit of JS — perfect for e-commerce, product showcases, or creative portfolios.

---

🎥 Demo

👉 https://www.youtube.com/watch?v=HV_7-rM-I7o
👉 https://github.com/renocmon-cloud/3dkub

---

💡 Idea

The idea was simple: a rotating cube where each face is clickable — linking to a different shoe (or any product page).
It spins smoothly in 3D, stops on hover, and even works on touch devices.

This could be useful for:

• Fashion or shoe stores
• Product galleries
• Interactive 3D landing pages
• Or just learning cool CSS 3D transformations!

---

🧱 How It Works

The cube is built using 6 divs, each representing one face.
We use transform: rotateY() and translateZ() to position them in 3D space.

🧩 Structure

<div class="scene">
  <div class="cube">
    <a href="shoe1.html" class="face face-front"  style="background-image:url('images/img1.jpg')"></a>
    <a href="shoe2.html" class="face face-back"   style="background-image:url('images/img2.jpg')"></a>
    <a href="shoe3.html" class="face face-right"  style="background-image:url('images/img3.jpg')"></a>
    <a href="shoe4.html" class="face face-left"   style="background-image:url('images/img4.jpg')"></a>
    <a href="shoe5.html" class="face face-top"    style="background-image:url('images/img5.jpg')"></a>
    <a href="shoe6.html" class="face face-bottom" style="background-image:url('images/img6.jpg')"></a>
  </div>
</div>

Each <a> tag acts as a clickable face with its own background image.

---

🎨 CSS Magic

The CSS handles the 3D layout and animation.

.cube {
  transform-style: preserve-3d;
  animation: spin 10s infinite linear;
}

@keyframes spin {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

Hovering the cube pauses the rotation:

.scene:hover .cube {
  animation-play-state: paused;
  cursor: pointer;
}

It looks smooth because of perspective, which gives the illusion of depth.

---

📱 Mobile Support

A few lines of JavaScript let mobile users tap the cube to pause/resume rotation:

const cube = document.querySelector('.cube');
const scene = document.querySelector('.scene');
let isPaused = false;

scene.addEventListener('touchstart', () => {
  isPaused = !isPaused;
  cube.style.animationPlayState = isPaused ? 'paused' : 'running';
});

---

🚀 Try It Yourself

1. Copy the HTML/CSS/JS code.
2. Replace the image URLs with your own product pictures.
3. Open it in a browser — voilà, you have a rotating 3D cube!

---