Transforms in their own properties in CSS

translate, rotate and scale are properties now, so two rules can move the same element.

.chip {
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition: translate 150ms ease, rotate 150ms ease, scale 150ms ease;
}

.chip:hover { translate: 0 -2px; scale: 1.03; }
.chip.is-dragging { rotate: 2deg; scale: 1.05; }

.spinner {
  transform-origin: center;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to { rotate: 360deg; }
}

How it works

1. Separate properties compose instead of overwriting each other.
2. The order is always translate, then rotate, then scale.
3. transform still works, and still wins as one indivisible value.

Keywords and builtins used here

• animation
• chip
• deg
• keyframes
• ms
• px
• rotate
• scale
• spinner
• transition
• translate

The run, in numbers

Lines

18

Characters to type

341

Tokens

95

Three-star pace

90 tpm

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

Type this snippet

Step 5 of 8 in Motion & effects, step 15 of 21 in Responsive & modern CSS.

← Previous Next →