Transforms: Translate, Scale, Rotate

7 min read

Transforming Elements in 2D and 3D

The transform property moves, scales, rotates, or skews elements without affecting the document layout. The element still occupies its original space — only its visual rendering is changed.

css

.card:hover {
  /* Move 0px horizontally, -8px vertically */
  transform: translateY(-8px);
}

.icon {
  /* Scale up by 20% */
  transform: scale(1.2);
}

.badge {
  /* Rotate 45 degrees clockwise */
  transform: rotate(45deg);
}

/* Chain multiple transforms (applied right to left) */
.chip:hover {
  transform: translateY(-4px) scale(1.05);
}

/* 3D transforms */
.card-3d {
  transform: perspective(800px) rotateY(15deg);
}

/* Change the origin of the transform */
.origin-example {
  transform-origin: top left;
  transform: rotate(30deg);
}

transform does not affect the element's position in the layout. If you need to push elements around, use margin or position. Use transform: translate() only for visual offsets like hover effects or animations.

Ready to test yourself?

Practice CSS— quiz & coding exercises