2D & 3D Transforms

.box {
  transform: translate(20px, 10px) rotate(15deg) scale(1.2);
  transform-origin: top left;
}

/* 3D transforms need perspective on the parent */
.scene { perspective: 800px; }
.card {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Flip card pattern */
.flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flipper:hover { transform: rotateY(180deg); }

/* Transforms don't trigger reflow, so they're GPU-friendly */