Tarjeta de producto con efecto Tilt y 3D en Divi

El efecto Tilt es un movimiento de rotación de un elemento a medida que el usuario pasa el cursor por encima y lo desplaza. El elemento sigue el movimiento del cursor y genera esa sensación tridimensional tan atractiva, perfecta para sumarle movilidad a casi cualquier componente de un sitio web. Lo bueno es que no es solo un capricho estético: el movimiento atrae la mirada hacia el elemento exacto que quieres que el visitante note, y eso, en una página de ventas, es oro puro.

Puedes usar el efecto Tilt en Divi para mejorar una campaña de venta de productos en tu eCommerce o landing page de venta. En este tutorial vas a aprender a hacerlo de forma rápida, y además incluyo un efecto hover 3D de tarjetas de productos que también te puede interesar muchísimo. Vamos a separarlo en dos técnicas independientes, para que apliques la que mejor calce con tu diseño o, si te animas, las combines.

Mira el resultado que lograremos:

Por qué un efecto 3D vende más que una tarjeta estática

Antes de entrar al código, quiero que entiendas el porqué, porque ahí está la diferencia entre copiar un snippet y aplicarlo con criterio. Una tarjeta totalmente plana compite contra todo lo demás de la pantalla: no tiene jerarquía visual ni movimiento, no le grita al ojo "mírame a mí". Cuando le agregas profundidad y reacción al cursor, ese elemento deja de ser fondo y se vuelve protagonista. Hay un principio detrás de esto, la profundidad percibida: nuestro cerebro está cableado para prestarle atención a lo que parece tener volumen y a lo que se mueve. Una tarjeta que rota siguiendo el mouse activa esa respuesta, y ese segundo extra de atención es justo lo que necesitas para que el visitante lea tu titular, vea el precio y considere el botón de compra.

Consejo: No abuses del efecto Tilt. Si todas las tarjetas de tu página se mueven, ninguna destaca. Resérvalo para el producto estrella, la oferta del momento o el plan que quieres empujar. La escasez visual hace que el movimiento valga más.

Crea una tarjeta de producto o un elemento gráfico para aplicar el efecto Tilt y 3D

Para comenzar, diseña un elemento gráfico al cual puedas aplicar el efecto Tilt. Para nuestro ejemplo, usé una plantilla importada directamente desde la librería de Divi. Aquí es cuestión de creatividad y de que elijas mostrar el diseño que quieras. No necesitas nada complejo: una imagen, un título, un texto descriptivo y un botón ya son más que suficientes para que el efecto luzca espectacular.

Para nuestro ejemplo, seleccioné una fila con 4 módulos. Estos módulos contienen una imagen, un título, un texto descriptivo y un botón; les di los estilos que ves en el video, y nos quedó este resultado:

Esto nos permite personalizar el módulo a nuestra manera y dejarlo con un aspecto minimalista y simple. Un detalle importante en esta etapa: cuida que la fila tenga un espacio de respiro alrededor de la tarjeta. El efecto 3D necesita aire para "salir" hacia el espectador; si la tarjeta está pegada a otros elementos, la rotación se siente apretada y pierde elegancia. Lo siguiente es aplicar las clases a cada uno de los elementos, las veremos acá:

Clases CSS a usar para efecto 3D:

• Clase para la fila: et-hover-container
• Clase para cada columna:  et-mousemove-card
• Clase para la imagen:  et-card-image
• Clase para ti título del producto: et-card-heading
• Clase para la información del producto: et-card-info
• Clase para el botón: et-card-button

Cada clase se asigna desde la pestaña "Avanzado > Identificador y clases CSS" del módulo o de la fila correspondiente, dependiendo de qué elemento estés configurando. Tómate el tiempo de escribirlas con cuidado: un error de tipeo en una clase es la causa número uno de que el efecto "no funcione" cuando en realidad el código está perfecto. Después de asignar las clases aplicaremos el siguiente CSS para generar el efecto 3D en nuestra tarjeta de producto.

CSS a usar para efecto 3D:

<style>
/*add perspective to row for 3d perspective of child elements*/
.et-hover-container {
perspective: 1000px;
}
 
/*preserve-3d needed for 3d effect on card elements*/
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
 
/*transition timing function and duration for card elements*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
 
/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}
</style>

Fíjate en la lógica de este CSS, porque entenderla te da control total. La propiedad perspective en el contenedor padre es la que define qué tan pronunciada se ve la profundidad: a menor valor, más dramático el efecto 3D. La propiedad transform-style: preserve-3d es la que permite que los elementos hijos floten en distintos planos de profundidad. Y los distintos valores de translateZ en cada elemento son los que hacen que la imagen, el título, la info y el botón se separen en capas, generando esa sensación de explosión 3D al pasar el cursor.

JavaScript a usar para efecto 3D

Este código lo podemos meter en un módulo de código dentro del mismo ejemplo, tal como muestro en el tutorial. Con ello completaremos la funcionalidad del efecto 3D. El módulo de código de Divi es el lugar ideal para este tipo de scripts porque se carga solo en la página donde lo necesitas, sin ensuciar el resto del sitio.

<script>
jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
 
//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});
 
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
 
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});
</script>

El script hace tres cosas: escucha el movimiento del mouse y calcula los ejes X e Y según la posición del cursor para rotar la tarjeta; al entrar el cursor agrega la clase transform-3d que dispara la separación en capas del CSS; y al salir devuelve la tarjeta a su posición neutral. El divisor / 25 controla la intensidad del giro: súbelo para un efecto más sutil, bájalo para uno más exagerado.

Consejo: Si el efecto se siente demasiado brusco, juega con el valor de transition en el CSS y con el divisor del script. Un buen efecto 3D se siente fluido, casi como si la tarjeta flotara sobre un líquido, nunca robótico ni a saltos.

Con ello podremos crear un poderoso efecto 3D que se aplicará a cualquier elemento que quieras. Pero si lo que quieres es aplicar un efecto Tilt más limpio y basado en una librería ya probada, lo veremos en los próximos pasos.

Clase CSS para usar el efecto Tilt

Clase CSS: et-column-js-tilt

Esta clase se debe aplicar en la columna de la fila donde queremos implementar el efecto. La ventaja de esta segunda técnica es que se apoya en una librería liviana y bien optimizada, lo que te ahorra escribir toda la lógica de rotación a mano y te da un comportamiento más pulido de fábrica:

Script para Efecto Tilt

Este script, al igual que el anterior, lo puedes aplicar dentro de un módulo de código con Divi y ponerlo debajo de cualquier elemento en el diseño. Con este script estaremos generando la funcionalidad para el efecto Tilt dentro de Divi.

<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

<script>
jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {
    
    $(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});
 
  }
});
</script>

Hay un detalle de este script que muchos pasan por alto: la condición if ($(window).width() > 980). Esa línea activa el efecto Tilt solo en pantallas mayores a 980 píxeles (escritorio), y es totalmente intencional, porque el Tilt depende del movimiento del mouse, que no existe en pantallas táctiles. Es la clase de detalle que separa una implementación profesional de un copy-paste a ciegas.

Los parámetros scale y perspective de la librería tilt.js te dan dos palancas de control: scale define cuánto crece la tarjeta al pasar el cursor (1.1 equivale a un 10% más grande) y perspective regula la intensidad de la inclinación. Te recomiendo no pasarte con el scale; un crecimiento sutil se siente premium, mientras que uno exagerado parece un error de maquetación.

Errores comunes al implementar el efecto Tilt en Divi

Después de ver a muchísimos alumnos aplicar esta técnica, identifiqué tres errores que se repiten. El primero es el error de tipeo en las clases: si la clase del CSS no coincide exactamente con la que pusiste en el módulo, el efecto no aparece y vas a perder media hora buscando un fallo que no existe en el código. El segundo es romper el orden de carga de jQuery con algún plugin de optimización agresivo que difiere o combina scripts; si el efecto deja de funcionar tras instalar un plugin de velocidad, ese suele ser el culpable. Y el tercero es no medir el rendimiento: estos efectos recalculan posiciones constantemente, así que en una sola tarjeta son imperceptibles, pero aplicados a doce productos a la vez generan tirones en equipos modestos. Por eso insisto: úsalos con intención.

🎓 Si quieres dominar Divi a fondo y aprender a crear efectos interactivos como este de forma profesional, explora los cursos en uxdivi.com/cursos/ — desde los fundamentos hasta técnicas avanzadas de animación y conversión.

Preguntas frecuentes sobre el efecto Tilt y 3D en Divi

¿El efecto Tilt funciona en celulares y tablets?

No, y eso es por diseño. El efecto Tilt depende del movimiento del cursor, que no existe en pantallas táctiles. Por eso el script lo activa solo en pantallas mayores a 980 píxeles. En móvil tu tarjeta se verá normal y funcional, simplemente sin la rotación.

¿Necesito saber programar para usar estas técnicas?

No desde cero, porque te entrego el código completo listo para pegar. Solo debes copiar el CSS y el JavaScript en un módulo de código y asignar bien las clases. Dicho esto, entender qué hace cada parte (como te expliqué arriba) te permite personalizar la intensidad en lugar de quedarte con el resultado por defecto.

¿Cuál de las dos técnicas debería usar, la 3D manual o el Tilt con librería?

Depende del resultado que busques. El 3D manual separa los elementos en capas y genera una "explosión" de profundidad llamativa, ideal para una tarjeta protagonista. El Tilt es más sutil: la tarjeta entera se inclina como una pieza siguiendo el cursor, y luce más coherente en catálogos donde varias tarjetas comparten estilo.

Conclusiones

El efecto Tilt 3D dentro de Divi es una excelente forma de promocionar una tarjeta de producto o una landing page de venta, o simplemente de mejorar el diseño de un sitio de forma profesional. Vimos dos caminos complementarios: el 3D manual con CSS y JavaScript que separa los elementos en capas, y el Tilt con la librería tilt.js que inclina la tarjeta como una pieza única. Lo más valioso es que ambos usan código liviano y reutilizable, sin plugins pesados, y los puedes adaptar a portfolios, planes de precios o cualquier elemento que merezca brillar. Recuerda siempre el principio de la escasez visual: el movimiento impacta justamente porque no está en todas partes.

¿Te ha gustado el tutorial? Recuerda compartirlo acá abajo y dejar tus comentarios con el resultado que lograste. Si quieres seguir aprendiendo a sacarle todo el provecho a Divi con técnicas como esta, te invito a explorar nuestros cursos y llevar tus diseños al siguiente nivel.

🎓 ¿Listo para crear sitios web que venden de verdad? En uxdivi.com/cursos/ encontrarás cursos completos para dominar Divi, WooCommerce y cada herramienta que necesitas para convertir visitas en clientes.

¡Un abrazo!