Transformaciones

Domina las transformaciones CSS con ejemplos claros y prácticos. Aprende a mover, rotar y escalar elementos con translate, rotate y scale, usando hover como trigger y transition para suavizar el cambio. Además, configura un layout flexible con flexbox para visualizar tus cajas en columnas con buen espaciado.

¿Cómo preparar el contenedor y los elementos con flex y estilos base?

Antes de animar, conviene definir una base visual clara. Un container con display: flex permite alinear y separar elementos de forma sencilla. Cada box tendrá tamaño fijo, color de fondo y centrado de texto.

¿Qué propiedades dan estructura y espaciado?

• Usa display: flex para organizar en columnas o filas.
• Aplica gap: 30px para separar elementos.
• Añade margin-bottom: 40px y padding: 20px para respirar.
• Define background: #f0f0f0 para contraste suave.
• Crea box de 100px x 100px con background: #3498DD y texto blanco.
• Centra contenido con align-items: center y justify-content: center.

.container {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  padding: 20px;
  background: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  background: #3498DD;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

¿Cómo suavizar cambios con transition en transform?

• Añade transition: transform 0.3s para evitar saltos bruscos.
• Mejora la percepción del movimiento y la interacción.

.box {
  /* ...estilos previos... */
  transition: transform 0.3s;
}

¿Cómo mover elementos con translateX, translateY y en diagonal?

translate desplaza un elemento desde su posición original sin afectar al resto del layout. El trigger será :hover para visualizar el movimiento al pasar el cursor.

¿Qué hace translateX y translateY en hover?

• translateX(30px) mueve 30 píxeles en horizontal.
• translateY(-30px) mueve 30 píxeles hacia arriba con valor negativo.

.translate-x:hover { transform: translateX(30px); }
.translate-y:hover { transform: translateY(-30px); }

• Con transition, el desplazamiento se ve sutil y fluido.
• Útil cuando quieres indicar interactividad sin reflow del documento.

¿Cómo mover en diagonal con translate?

• Pasa dos valores: x, y.
• Un ejemplo común: translate(20px, 20px) para ir a la derecha y abajo.

.translate-xy:hover { transform: translate(20px, 20px); }

• Recuerda: el trigger es hover, pero puedes usar otros según la interacción deseada.

¿Cómo rotar y escalar con rotate y scale?

rotate gira el elemento desde su centro por defecto (puedes cambiarlo con transform-origin). scale modifica el tamaño relativo sin romper el flujo.

¿Cómo rotar desde el centro con rotate?

• Define el ángulo en grados: 45deg, 90deg, 180deg.

.rotate-45:hover { transform: rotate(45deg); }
.rotate-90:hover { transform: rotate(90deg); }
.rotate-180:hover { transform: rotate(180deg); }

• El giro sucede sobre el centro si no especificas otro punto.
• Ideal para expresar estados o direcciones de forma visual.

¿Cómo reducir o ampliar con scale?

• scale(0.5) reduce a la mitad.
• scale(1.5) aumenta 1.5 veces.
• scale(2) duplica el tamaño.

.scale-small:hover { transform: scale(0.5); }
.scale-medium:hover { transform: scale(1.5); }
.scale-2x:hover { transform: scale(2); }

• Usa transition: transform 0.3s para evitar cambios bruscos.
• Aplica valores según el objetivo visual del diseño.

¿Quieres que mostremos combinaciones de transformaciones o triggers alternativos como focus o eventos de JavaScript? Cuéntalo en los comentarios y sumamos ejemplos.