Transformaciones en propiedades propias en CSS

translate, rotate y scale ya son propiedades: dos reglas pueden mover el mismo elemento.

.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; }
}

Cómo funciona

1. Las propiedades separadas se componen en vez de sobrescribirse.
2. El orden es siempre translate, luego rotate, luego scale.
3. transform sigue funcionando, y sigue ganando como un valor indivisible.

Palabras clave y builtins usados aquí

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

El intento, en números

Líneas

18

Caracteres a escribir

341

Tokens

95

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 63 segundos.

Escribe este fragmento

Paso 5 de 8 en Movimiento y efectos; paso 15 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →