Estoy empezando con el mundo de HTML, CSS y JS y ando algo perdido la verdad.
Estoy probando de hacer unas tarjetas que giren. Por el momento he logrado que giren cuando paso el ratón por encima, pero quiero que giren cuando hago clic sobre ellas. A parte de que cuando gire una, la anterior recupere su posición original.
El HTML de las tarjetas
<div class="flipCard">
<div class="flipCardInterior">
<div class="flipCardFrontal">
<div class="interiores">
<h2>texto </h2>
</div>
<img src="image.jpg" alt="" style="width:310px;height:auto;">
</div>
<div class="flipCardPosterior">
<div class="traseraTexto">
<p>texto</p>
</div>
</div>
</div>
</div>
El CSS
.flipCard {
background-color: red;
width: 310px;
height: 310px;
margin: 0.5rem;
padding: 0;
perspective: 1000px;
}
.flipCardInterior{
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flipCard:hover .flipCardInterior {
transform: rotateY(180deg);
}
.flipCard.is-flipped {
transform: rotateY(180deg);
}
.flipCardFrontal, .flipCardPosterior {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flipCardPosterior {
background-color: blue;
color: black;
transform: rotateY(180deg);
}
.interiores {
position: absolute;
bottom: 0;
text-align: right;
padding-right: 15px;
width: 100%;
}
.interiores h2 {
margin-bottom: 7px;
color: black;
}
.traseraTexto {
position: absolute;
height: 100%;
display: grid;
padding: 3rem 1.5rem;
}
Y la parte del Javascript es donde me quedo perdido y no tengo claro como puedo resolverlo. Además el javascript debería ir en una archivo a parte y muchos ejemplos que veo simplemente ponen
$(this).click(function() {}
Con el código dentro y no tengo claro como poner eso en un archivo externo y llamar a la función.
¿pueden ayudarme?