Transforms in CSS

Moving, scaling and rotating a box without touching layout.

.card:hover {
  transform: translateY(-4px) scale(1.02);
}

.chevron {
  transform-origin: center;
  rotate: 0deg;
  transition: rotate 150ms ease;
}

details[open] .chevron {
  rotate: 90deg;
}

.badge {
  transform: translate(-50%, -50%) rotate(-8deg);
}

How it works

1. Transforms compose left to right, so order matters.
2. transform-origin moves the point everything pivots around.
3. Individual properties like rotate can be animated separately.

Keywords and builtins used here

• badge
• card
• chevron
• deg
• ms
• px
• rotate
• scale
• transform
• transition
• translate
• translateY

The run, in numbers

Lines

17

Characters to type

244

Tokens

71

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 47 seconds.

Type this snippet

Step 4 of 8 in Motion & effects, step 14 of 21 in Responsive & modern CSS.

← Previous Next →