📘 Módulo 5: CSS Avanzado – Efectos visuales modernos

Domina transformaciones 2D y 3D. Crea transiciones fluidas y animaciones complejas con @keyframes.

Objetivos

Dominar transformaciones 2D y 3D.
Crear transiciones fluidas y animaciones complejas con @keyframes.
Usar filtros y efectos modernos (blur, sombras dinámicas, glassmorphism).
Aplicar combinaciones creativas para interfaces atractivas y actuales.

🔹 1. Transformaciones 2D y 3D

css

/* Rotación y escala */
.caja {
  transform: rotate(15deg) scale(1.2);
  transition: transform 0.5s ease;
}

.caja:hover {
  transform: rotate(0deg) scale(1);
}

/* Perspectiva 3D */
.cubo {
  transform: rotateY(45deg) translateZ(50px);
}

🔹 2. Animaciones avanzadas con keyframes

css

@keyframes rebote {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bola {
  animation: rebote 1s infinite;
}

👉 Ejemplo: un icono que rebota suavemente para llamar la atención.

🔹 3. Filtros y efectos modernos

css

/* Glassmorphism */
.tarjeta {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Imagen con efecto sepia al hover */
img:hover {
  filter: sepia(80%) contrast(120%);
}

🔹 4. Sombras dinámicas y neon glow

css

/* Sombra suave */
.boton {
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Efecto neón */
.neon {
  color: #ffcc33;
  text-shadow: 0 0 5px #ffcc33, 0 0 10px #ff6600;
}

🔹 5. Combinación de efectos

Puedes combinar transformaciones, transiciones y filtros para lograr interfaces modernas:

Botones con destello + glow.
Tarjetas con glassmorphism + animación hover.
Iconos con rebote + rotación 3D.

📝 Actividad práctica

Diseña una tarjeta glassmorphism con animación de entrada (fade-in).
Crea un botón con efecto neón que pulse suavemente.
Haz que un icono ⚡ rebote y gire al pasar el ratón.

MÓDULO 6 CSS Optimización y buenas prácticas