Cómo crear un efecto Flip Card para tu web

Esta semana aprenderemos a crear un efecto flip card para las imágenes de nuestros WordPress. Este artículo complemente el de la semana pasada donde aprendimos a voltear una imagen.

Hacer un efecto de rotación 3d en una imagen

Utilizando las propiedades de transformación y de rotación, podemos crear el efecto tan usado de una imagen que se gira y muestra un texto cuando pasamos el cursor sobre ella.

El código CSS utilizado es el siguiente:

/* Establecemos el ancho y la altura como deseemos, elimina la perspectiva si no deseas el efecto 3D */
.giro {
background-color: transparent;
width: 300px;
height: 300px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Borra esta línea si no quieres el efecto 3D */
}
/* Este contenedor es necesario para colocar el anverso y el reverso */
.giro-interno {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Hace un giro horizontal cuando muevas el ratón sobre el contenedor de la caja */
.giro:hover .giro-interno {
transform: rotateY(180deg);
}
/* Coloca el anverso y el reverso */
.giro-frontal, .giro-detras {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Estilos de la parte trasera (alternativa por si falta la imagen) */
.giro-frontal {
background-color: #bbb;
color: black;
}
/* Estilos de la parte trasera */
.giro-detras {
background-color: #000;
color: white;
transform: rotateY(180deg);
}

Como puedes ver, cada bloque de programación está comentado con lo que hace dicho bloque y los cambios que puedes hacer tú mismo.

Y ahora el código HTML que debemos escribir para insertar la imagen:

<div class="giro">
<div class="giro-interno ">
<div class="giro-frontal">
<img src="https://blog.josegonzalezbueno.com/wp-content/uploads/2020/08/imagen-cuadrada-300x300.jpg" alt="Imagen de ejemplo" style="width:300px;height:200px">
</div>
<div class="giro-detras ">
<h1>Título del efecto</h1>
<p>Subtítulo</p>
<p>Texto del contenido para el efecto</p>
</div>
</div>
</div>

El resultado es el siguiente:

 

Título del efecto

Subtítulo

Contenido del efecto

Como puedes ver es una opción muy vistosa y muy utilizada para los apartados de Nuestro equipo, ya que en la misma imagen podemos poner la propia imagen y los textos descriptivos de la misma (nombre y apellidos, cargo en la empresa y una pequeña descripción).