Transformaciones en CSS

Mover, escalar y rotar una caja sin tocar el 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);
}

Cómo funciona

1. Las transformaciones se componen de izquierda a derecha; el orden importa.
2. transform-origin mueve el punto alrededor del cual pivota todo.
3. Propiedades individuales como rotate pueden animarse por separado.

Palabras clave y builtins usados aquí

• deg
• ms
• px
• rotate
• scale
• transform
• transition
• translate
• translateY

El intento, en números

Líneas

17

Caracteres a escribir

244

Tokens

71

Ritmo de tres estrellas

90 tpm

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

Escribe este fragmento

Paso 4 de 8 en Movimiento y efectos; paso 14 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →