Estoy haciendo un memorama, en la cual tengo ahorita mis cartas se encuentran con hover, para que al pasar el cursor se volten a 180 grados, pero quiero que en lugar de pasar el cursor, al dar click en la carta se cambie de la parte de atras hacia adelante, y asi que pueda ver lo que hay en la carta.
Este es mi codigo de JavaScript, estoy trayendo las imagenes desde un JSON. dinamicamente
// Traer la data del JSON en un fetch
fetch("../data/memory.json")
.then((response) => response.json())
.then((data) => iterarcartas(data))
.catch((error) => console.log(error))
//estante de libros
let carteria = document.getElementById("estante")
//Ierar JSON libros
let iterarcartas = (data) => {
console.log(data.cartas)
for (const carta of data.cartas) {
carteria.innerHTML += `<div class="carta-tablero">
<div class="memorama">
<div class="memorama-cover" id='${carta.Nombre}'></div>
<div class="memorama-back"><img class="imagen" src='${carta.img}'></div>
</div>
</div>`
}
}
:hover
para poder tener una idea. ¿Y a qué div se hace:hover
?