Back to Lessons

CSS Transforms 3D Effects

April 5, 2026

CSS Transforms and 3D

Create hover effects, card flips, 3D layouts.

2D Transforms

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: rotate(5deg) scale(1.05) translateY(-10px);
}

3D Transforms

.scene {
  perspective: 1000px;
}

.card3d {
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform 0.6s;
}

.card3d.flipped {
  transform: rotateY(0deg);
}

Transform Properties

  • translateX/Y/Z, scaleX/Y/Z, rotateX/Y/Z
  • skewX/Y, matrix3d (advanced)
  • transform-origin (pivot point)
  • perspective-origin (viewer position)
Previous Lesson Next Lesson