Cargando...

Transforms CSS

Las transiciones fijan cuánto dura un cambio. Transform decide dónde van los píxeles: desplazar un chip, girar un icono de carga, escalar un badge al hover — sin empujar vecinos como margin o top.

Qué cambia transform

transform aplica un mapa 2D (luego 3D) a la caja pintada. El hueco en el flujo suele quedar igual. translate() encaja en micro-movimientos: hover, abrir/cerrar, retoques.

Una propiedad, varias funciones — no listas con comas dentro de un solo transform; encadénelas con espacios: transform: translateX(1rem) rotate(8deg) scale(1.05);

Funciones 2D clave

📊 Funciones transform 2D de un vistazo

Función	Uso habitual
`translate(x, y)` / `translateX` / `translateY`	Mover sin drama de reflow
`rotate(ángulo)`	Girar iconos y flechas (`deg`, `turn`)
`scale(x, y)` / `scale(n)`	Énfasis al hover — valores modestos
`skew(x, y)`	Inclinación rara — ángulos pequeños

Ángulos en deg o turn. Los porcentajes en translate() son respecto al tamaño del propio elemento.

translate primero

Para un empujón visual, elija translate antes que top/margin. Con transition del tema anterior, el movimiento suele ser más suave.

Chip nudge on hover

css

.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}

El chip sube visualmente; la caja de línea no se mueve. Pruebe margin-top negativo y verá saltos.

rotate y scale juntos

Iconos y badges suelen combinar scale pequeño con rotate. Ángulos contenidos mantienen un UI profesional.

Badge pop and chevron spin

css

.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}

.badge:hover {
transform: scale(1.06);
}

.chevron {
display: inline-block;
transition: transform 0.2s ease;
}

.menu-open .chevron {
transform: rotate(180deg);
}

scale(1.06) es énfasis; scale(2) suele ser error. rotate(180deg) indica «abierto» — con clase en HTML/JS.

transform-origin — eje de giro

Por defecto el pivote es el centro. transform-origin lo mueve — abajo-izquierda como puerta, 50% 100% para pestañas.

Hinge from bottom edge with transition

css

.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}

.panel-tilt.is-open {
transform: rotateX(12deg);
}

rotateX leve como vocabulario. El 3D completo está en 3D Transforms opcional — aquí importa origin.

Con transition; evite layout

Ponga transition en la regla base y anime transform (y opacity). Respete prefers-reduced-motion: reduce.

Pruébelo usted

Eleve un botón con translateY(-0.2rem) — compare con margin-top.
Gire chevron 180deg con .is-open.
transform-origin: left center y rotate pequeño.
Encadene translateX(0.5rem) scale(1.04) en un solo transform.
Emule reduced motion.

Errores comunes

top/margin para lift en lugar de translate
rotate(45deg) en contenedores grandes
Olvidar transform-origin
scale(0) sin plan de accesibilidad
3D pesado cuando basta 2D

Resumen

transform mueve la caja pintada; el flujo suele quedar
Encadene funciones en un transform
transform-origin = pivote
Combine con transition
Siguiente: Animaciones CSS (@keyframes)

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma