1

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>
Esto viene a ser un proyecto propio en el cual estoy haciendo uso de los conocimientos que vaya adquiriendo para poder repasar del mismo en caso de que me olvide de algo. Proximamente lo quisiera subir a internet para facilitar el aprendizaje de las personas en todos los aspectos. Si alguien podria ayudarme con mi duda seria de gran ayuda. Desde ya muchas gracias.

1
  • Comparte el código para ver qué estás haciendo.
    – René
    el 23 jul. a las 22:54

1 respuesta 1

0

Puedes hacer lo siguiente:

  • Agregas el atributo onclick en tu div de todo el card para indicar que al hacerle clic, ejecute la función:

    <div class="flip-card-inner" onclick="voltearTarjeta()">
      <!-- todo el card -->
    </div>
    
  • La función se apoya de un booleano inicializada en false, donde en la primera vez que se hace clic, el booleano como está en false, hará girar al card -180 grados y luego cambia el valor del booleano para que en la siguiente vez que se haga clic, el booleano estando en true, hará girar al card 0 grados, volviendo a su ángulo normal, sucesivamente.

    let voltearCard = false;
    
    function voltearTarjeta() {
      let card = document.querySelector('.flip-card-inner');
      let rotacion = voltearCard ? 0 : -180;
    
      card.style.transform = `rotateY(${rotacion}deg)`;
      voltearCard = !voltearCard;
    }
    

Ejemplo:

let voltearCard = false;

function voltearTarjeta() {
  let card = document.querySelector('.flip-card-inner'); // capturo el card.
  let rotacion = voltearCard ? 0 : -180; // Si "voltearCard" es true, "rotacion" es 0, de lo contrario, -180.
  
  card.style.transform = `rotateY(${rotacion}deg)`; // dependiendo del booleano, le aplico el estilo de rotación al card, si gira -180 o 0 grados.
  voltearCard = !voltearCard; // cambio el estado del booleano.
}
.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-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" onclick="voltearTarjeta()">
      <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>

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.