📘 Módulo 18: CSS Avanzado – Efectos interactivos

Crear efectos mover en 3D para dar profundidad a los elementos. Implementar tilt effects que reaccionen al movimiento del ratón.

Objetivos

• Crear efectos hover en 3D para dar profundidad a los elementos.
• Implementar tilt effects que reaccionen al movimiento del ratón.
• Usar glassmorphism dinámico con animaciones y transiciones.
• Integrar estos efectos en componentes modernos como tarjetas y botones.

🔹 1. Hover 3D con transformaciones

css

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: rotateY(10deg) rotateX(5deg) scale(1.05);
}

👉 La tarjeta se inclina y escala al pasar el ratón, generando un efecto tridimensional.

🔹 2. Tilt effect con JavaScript + CSS

css

.tilt {
  transition: transform 0.2s ease;
}

js

const tilt = document.querySelector(".tilt");
tilt.addEventListener("mousemove", (e) => {
  const { offsetWidth: w, offsetHeight: h } = tilt;
  const { offsetX: x, offsetY: y } = e;
  const rotX = ((y / h) - 0.5) * 20;
  const rotY = ((x / w) - 0.5) * 20;
  tilt.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
});

👉 El elemento se inclina dinámicamente según el movimiento del ratón.

🔹 3. Glassmorphism dinámico

css

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.3s ease;
}

.glass:hover {
  background: rgba(255, 255, 255, 0.3);
}

👉 Tarjeta con efecto de cristal que se intensifica al hover.

🔹 4. Combinación de efectos

• Hover 3D + tilt: tarjetas que reaccionan tanto al hover como al movimiento del ratón.
• Glassmorphism + animación: tarjetas con efecto cristal que cambian suavemente al interactuar.
• Botones interactivos: con glow dinámico y rotación ligera.

📝 Actividad práctica

1. Diseña una tarjeta con hover 3D que se incline al pasar el ratón.
2. Implementa un tilt effect en un bloque que reaccione al movimiento del cursor.
3. Crea un componente con glassmorphism dinámico que cambie de intensidad al hover.

MÓDULO 19 CSS Animaciones con SVG