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=".../s1600/cap-12.PNG" alt="Imagen de ejemplo" style="width:300px;height:200px"><h1>Mensaje</h1> </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:
Mensaje
Título del efecto
Subtítulo
Texto del contenido para el efecto
Este efecto fue extraído de la siguiente URL: https://www.josegonzalezbueno.com/flip-card-con-css/
