🚀 Create a Stunning 3D Rotating Cube That Spins on Scroll!

Have you ever wanted to create scroll animations that feel magical, without heavy JavaScript libraries slowing down your site? What if I told you that you can make a 3D cube spin on scroll effortlessly, using just CSS and Trig.js?

In this post, I’ll show you how to pin an element using position: sticky; and let Trig.js handle the scroll-based rotation. The result? A mesmerizing effect where the cube spins while staying in place, allowing the background to keep scrolling!

🎥 Check out the live CodePen demo

🛠 What We’re Building

With just a few lines of CSS and Trig.js, we’ll create:

✅ A 3D cube that rotates smoothly when you scroll

✅ A scroll interaction where the cube stays fixed while the page moves

✅ A lightweight solution that doesn’t require GSAP or ScrollMagic

✨ The Magic of Trig.js

We enable Trig.js on the parent element and use its CSS variables (--trig) on child elements. This lets us animate anything on scroll through CSS.

class="pinContainer" data-trig data-trig-degrees="true" data-trig-min="-200" data-trig-max="200">
   class="cubeContainer">
       class="cube">
           class="cube-face front">Front
           class="cube-face back">Back
           class="cube-face left">Left
           class="cube-face right">Right
           class="cube-face top">Top
           class="cube-face bottom">Bottom

📌 Pinning the Cube with position: sticky

This keeps the cube in place while the background scrolls:

.cubeContainer {
  position: sticky;
  top: 30%;
}

🔄 Rotating the Cube on Scroll

Using Trig.js, we apply dynamic rotations via CSS variables:

.cube {
  transform: rotateX(calc(var(--trig-deg) - 60deg)) rotateY(var(--trig-deg-reverse));
}

🧪 Try It Yourself!

This technique can be used for:

🎨 Interactive storytelling with 3D elements

🖥 Landing pages that grab attention

What will YOU create with it? 🤔

📢 Join the Trig.js Challenge!

Got a cool animation idea? Share it in the Trig.js Challenge!

For more deep dives into scroll animations, check out:

👉 CSS + JS for Scroll Animations – Here's Why

🔗 Resources

💡 Drop a comment below if you try this out! Let’s build something awesome together! 🚀