2D & 3D Transforms

Code

.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 */

Explanation

Transforms move, rotate, scale, or skew elements without affecting layout, making them GPU-friendly and performant. transform-origin sets the pivot point, and perspective enables 3D depth. preserve-3d keeps children in the same 3D space for effects like flip cards.

More CSS3 Snippets