0Pricing
CSS Academy · Lesson

Translate Rotate and Scale

Move elements with translate(), rotate them with rotate(), and resize with scale().

The transform Property

transform applies 2D and 3D visual transformations to elements: movement, rotation, scaling, and skewing. Transforms happen after layout — they do not affect surrounding elements.

translate()

Moves an element from its current position. Arguments: x and y displacement.

.card:hover {
  transform: translate(0, -8px);
  /* lift 8px upward */
}

.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

All lessons in this course

  1. Translate Rotate and Scale
  2. Skew and Matrix Transforms
  3. Transform Origin and Perspective
  4. 3D Transforms: rotateX rotateY translateZ
← Back to CSS Academy