0

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?

2 respuestas 2

0

Para poner el script en un archivo fuera del HTML debes llamarlo al final del mismo

<script src="funciones.js"></script>

Para ejecutar una función al hacer click en el div principal deberías hacer algo similar a esto dentro de tu archivo .js:

const element = document.querySelector(".flipcard");
element.addEventListener("click", () => {
/*  lo que quieras escribir aqui dentro */
});

Esa función flecha se ejecutará solamente cuando hagas click dentro del div con la clase "flipcard"

0

No conozco tanto de js pero creo que podrías manejarlo añadiendo y quitando clases con la regla:


classList.add
classList.remove

También estuve leyendo un poco acerca de agregar una clase al momento de hacer click en Clase Única por Click, pero siendo sinceros, el efecto de rotate en css funciona si se encuentra en un bucle infinito, de duración larga o se dispare al realizar alguna acción como un hover (que es lo que tienes desarrollado) pero no estoy seguro de si funcione al agregarlo como clase externa al momento de hacer click.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.