Hoy veremos comon crear un efecto “Flip card”, que consite en colocar contenido en la parte frontal y trasera de un elemento. Por ejemplo, imagina que tenemos un contenedor cuya parte frontal muestra la foto de perfil de una persona y en la parte trasera se puede leer información relevante como el nombre, cargo, redes sociales, etc, con lo cual se crea un efecto muy interesante.
Normalmente, este tipo de efecto se ejecuta cuando pulsamos sobre el elemento en cuestión, o hacemos click sobre algún botón, o bien cuando pasamos el puntero del ratón por encima del mismo.
Para este ejemplo, vamos a crear un elemento cuya parte frontal será de color rojo y tendrá la letra “a” en mayúscula, pero al pasar el puntero del ratón sobre el mismo se mostrará con un fondo de color azul y con una letra “b”, tambén en mayúscula.
Lo primero que haremos será definir un elemento <div> que servirá como contenedor, y dentro de este agregamos otro <div> que será al que le aplicaremos el efecto. Este, a su vez, este elemento encerrará dos div’s que representarán su parte frontal y trasera.
<div class="flip-container">
<div class="card">
<div class="front">
<p>A</p>
</div>
<div class="back">
<p>B</p>
</div>
</div>
</div>
Ahora vamos a aplicar los estilos CSS para crear el efecto. Primero vamos a definir las dimensiones del contenedor, agregamos unos bordes y luego la propiedad perspective para establecer la distancia entre el plano Z y el usuario con el fin de dar algo de perspectiva al elemento en una vista 3D.
.flip-container {
background-color: transparent;
width: 300px;
height: 300px;
border: 1px solid #ccc;
perspective: 1000px;
}
A continuación vamos a crear los estilos al segundo <div> que será al que le aplicaremos el efecto.
.flip-card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
Básicamente, definimos una anchura y altura de 100% para que ocupe todo el espacio de su contenedor. También lo posicionamos de forma relativa y agregamos un efecto de transición. Pero además, añadimos la propiedad transform-style que establece que los elementos hijos puedan preservar o no las transformaciones 3D.
Lo siguiente será crear otra regla para rotar el elemento padre en el eje horizontal cuando pasemos el puntero del ratón por encima del mismo.
.flip-container:hover .card {
transform: rotateY(180deg);
}
Luego creamos las reglas para aplicar estilos a los elementos que representarán la parte frontal y trasera.
Primero, los posicionamos de forma absoluta, y definimos sus dimensiones al 100%. Además agregamos la propiedad backface-visibility que permite ocultar la parte posterior de un elemento cuando se le aplica un giro de 180 grados. Para centrar las letras Ä” y “B” de forma horizontal y vertical agregaremos las propiedad display: flex, align-items: center y justify-content: center.
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
}
Por último, aplicamos estilos individuales para cada lado.
.front {
background-color: #ff0000;
color: black;
}
.back {
background-color: #0000ff;
color: white;
transform: rotateY(180deg);
}
Aquí puedes ver el código completo:
See the Pen Crear un efecto Flip card con CSS3 by simplicitytree (@simplicitytree) on CodePen.0
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023
