Flip Card con contenido al reverso
Código:
HTML
<div class="flip-container">
<div class="card">
<div class="front"></div>
<div class="back">
<ul>
<li><a href="https://www.espn.com.mx/futbol/equipo/_/id/86/real-madrid" target="_blank">Real Madrid</a></li>
<li><a href="https://www.espn.com.mx/futbol/equipo/_/id/132/bayern-munich" target="_blank">Bayern Munchen</a></li>
<li><a href="https://www.espn.com.mx/futbol/equipo/estadisticas/_/id/359/eng.arsenal" target="_blank">Arsenal</a></li>
<li><a href="https://www.espn.com.mx/futbol/equipo/_/id/160/fra.psg" target="_blank">Paris Saint-Germain</a></li>
<li><a href="https://www.espn.com.mx/futbol/equipo/_/id/114/napoli" target="_blank">Napoli</a></li>
<li><a href="https://www.espn.com.mx/futbol/equipo/estadisticas/_/id/817/team.al_nassr" target="_blank">Al Nassr</a></li>
<li><a href="https://www.espn.com.mx/futbol/equipo/_/id/437/fc-porto" target="_blank">Porto FC</a></li>
</ul>
</div>
</div>
</div>
CSS
.flip-container {
background-color: transparent;
width: 150px;
height: 100%;
perspective: 1000px;
margin: 0px 10px;
}
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-container:hover .card {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.front {
background: url(https://hammeringdown.com/wp-content/
uploads/2023/03/tactical-board.com-12.png?w=1024) no-repeat left /cover;
color: #fff;
}
.back {
background: url(img/libreta.jpg) no-repeat left /cover;
transform: rotateY(180deg);
}
.back li{
text-align: left;
}
.back li a{
color: black;
font-size: .8rem;
margin-left: 30px;
text-decoration: none;
}
.back li a:hover{
color: rgb(233, 47, 0);
}
