Change appearance with transform — grow, rotate, move

You now understand the mechanism for “changing smoothly” with transition. This time, we’ll add more options for what to change. The star is transform.

scale(): grow and shrink

<div class="icon">🐤</div>

.icon {
  transform: scale(1.2);
}

1 is the original size. 1.2 is 1.2 times, 0.8 is 0.8 times.

rotate(): rotate

<div class="icon">⭐</div>

.icon {
  transform: rotate(15deg);
}

You set the angle in deg (degrees). Positive is clockwise, negative is counterclockwise.

translate(): move

<button class="btn">Send</button>

.btn:hover {
  transform: translateY(-6px);
}

translateX() moves horizontally, translateY() vertically. A negative number moves it up or left, a positive one down or right. It’s often used for the effect of a button “softly lifting up.” To move horizontally and vertically at once, you can write two values separated by a comma, like translate(10px, -6px) (horizontal, then vertical).

They can be combined

scale(), rotate(), and translate() can be used at the same time when you separate them with spaces.

<div class="icon">🐤</div>

.icon:hover {
  transform: scale(1.1) rotate(5deg) translateY(-2px);
}

transform doesn’t push the surroundings aside

transform has one more important trait: no matter how much you move it, it doesn’t affect the layout of the surrounding elements.

Make width bigger and the neighboring element gets pushed out and the whole layout wobbles. But with transform: scale(1.3), even though it looks 1.3 times bigger, the space it takes up, as far as its neighbors are concerned, stays exactly the same. That’s why a card can softly grow without the neighboring cards shifting.

Change the axis of the transform with transform-origin

You can change this axis with transform-origin. For example, when you want to rotate around the base, like the hand of a clock, you write it like this:

<div class="hand"></div>

.hand {
  transform-origin: bottom center;
  transform: rotate(45deg);
}

Because it rotates around bottom center (the middle of the bottom edge), the hand swings from its base. For now it’s enough to remember: the default is the center, and you can change it with transform-origin.

Summary of this lesson

1. transform = a property that changes size, angle, and position
2. scale() grows/shrinks, rotate() rotates, translate() moves
3. You can specify several at once, separated by spaces
4. Pairing it with transition is the standard approach