CSS Transforms

2D transforms, 3D transforms, transform-origin, and perspective.

Overview

Transforms modify element coordinate systems.

Key Concepts

• 2D Transforms — rotate, scale, translate, skew
• 3D Transforms — rotateX, rotateY, translateZ
• Transform Origin — Center of transformation
• Perspective — 3D depth effect
• Transform Style — preserve-3d

Code Examples

/* 2D transforms */
.rotate { transform: rotate(45deg); }
.scale { transform: scale(1.5); }
.translate { transform: translateX(100px); }
.skew { transform: skewX(10deg); }

/* Combined transforms */
.complex {
  transform: rotate(45deg) scale(1.2) translateX(20px);
}

/* Transform origin */
.origin-center { transform-origin: center; }
.origin-top-left { transform-origin: top left; }
.origin-custom { transform-origin: 20% 80%; }

/* 3D transforms */
.rotate-3d {
  transform: perspective(1000px) rotateY(45deg);
}

.card-flip {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card-flip:hover {
  transform: rotateY(180deg);
}

.card-flip .front,
.card-flip .back {
  backface-visibility: hidden;
  position: absolute;
}

.card-flip .back {
  transform: rotateY(180deg);
}

/* Cube */
.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

@keyframes rotate {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

/* Hover effects */
.hover-tilt {
  transition: transform 0.3s ease;
}

.hover-tilt:hover {
  transform: perspective(500px) rotateX(10deg) rotateY(-10deg);
}

/* Scale on click */
.button:active {
  transform: scale(0.95);
}

/* Stacked cards */
.stacked-cards > *:nth-child(1) { transform: rotate(-2deg); }
.stacked-cards > *:nth-child(2) { transform: rotate(1deg) translateY(10px); }
.stacked-cards > *:nth-child(3) { transform: rotate(-1deg) translateY(20px); }

Practice

Build a 3D card flip animation and a rotating cube.