Tengo una section, la cual quiero que al darle click de un giro de 180 grados para mostrar un texto en la parte anterior del mismo. Pero no estoy entendiendo como se hace uso de ese evento. Mi idea es hacer que esto, cambie de lado al dar el click, es decir, que al primer click se de vuelta y presente la informacion posterior, y al darle click de nuevo. Regrese al inicio del mismo
Aqui les dejo el codigo:
.tarjeta
{
display: inline-table;
align-items: center;
}
.flip-card
{
background-color: transparent;
width: 400px;
height: 254px;
perspective: 1000px;
font-family: sans-serif;
}
.title-tarjetas
{
font-size: 1.8em;
font-weight: 900;
text-align: center;
margin: 0;
}
.title-texto
{
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin: 0;
}
.flip-card-inner
{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner
{
transform: rotateY(-180deg);
}
.flip-card-front, .flip-card-back
{
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid #ccc;
border-radius: 1rem;
}
.flip-card-front
{
background: linear-gradient(120deg, #a7d1d9 60%, #a7d1d9 88%,
rgb(255, 211, 195) 40%, #ccc 48%);
color: #333;
}
.flip-card-back
{
background: linear-gradient(120deg, #a7d1d9 30%, #a7d1d9 88%,
#ccc 40%, #ccc 78%);
color: #fff;
transform: rotateY(180deg);
}
<section class="tarjeta">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Titulo</p>
<p>Click Me</p>
</div>
<div class="flip-card-back">
<p class="title">Texto.</p>
</div>
</div>
</div>
</section>