3D Transforms

Lesson 6

GSAP animates rotationX, rotationY, and rotationZ on elements using scrollTrigger: { scrub: 1 }. The parent needs perspective and the element needs transform-style: preserve-3d for true 3D. scrub: 1 maps scroll progress to rotation values with a 1s smoothing lag.

Source Code script.js

// Auto-rotating cube — two overlapping timelines
const cube = document.querySelector('#cube');

gsap.to(cube, {
  rotationY: 360,
  duration: 8,
  ease: 'none',
  repeat: -1,
});

gsap.to(cube, {
  rotationX: 360,
  duration: 12,
  ease: 'none',
  repeat: -1,
});

// Click-to-flip cards
document.querySelectorAll('.flip-card').forEach((card) => {
  const inner = card.querySelector('.flip-inner');
  let flipped = false;

  card.addEventListener('click', () => {
    flipped = !flipped;
    gsap.to(inner, {
      rotateY: flipped ? 180 : 0,
      duration: 0.55,
      ease: 'power2.inOut',
    });
  });
});