Efecto de volteo de carta con CSS y Javascript

Hace unos dias me encontraba creando una web sobre cartas y quería conseguir un efecto de giro o volteo al hacer clic. Por lo que en este articulo te muestro como lo he conseguido

CSS para efecto de volteo o giro

Lo primero que debemos hacer es crear la clase en CSS que usaremos para la carta boca abajo (visión trasera) y crear una para la carta boca arriba (visión frontal). Ademas debemos crear un efecto de giro lo que también haremos con un poco de código en CSS

CSS del contenedor

1. El primer paso es establecer un contenedor. La estructura donde definiremos el resto de los campos del código

.container {
  perspective: 3000px;
  max-width: 960px;
  margin: 2em auto;
  text-align: center;
  font-size: 3em;
  display: flex;
  flex-wrap: wrap;
}

En este caso estamos usando unos parámetros básicos como max-width para establecer el tamaño máximo de nuestro contenedor. Establecemos un margen, un tamaño y centrado de texto.

Pero si observamos hemos colocado 2 aspectos importante. El primero display flex que básicamente es un modulo flexible y declaramos un flex-wrap de tipo wrap que básicamente para no complicarnos nos ayudara con los elementos que queremos colocar dentro de nuestro contenedor.

CSS de la carta o elemento

Ahora creamos el CSS de la carta o elemento que deseamos que gire

.card {
  width: 100px;
  height: 150px;
  transform-style: preserve-3d;
  transition: transform .5s;
  cursor: pointer;
  margin: 15px;
  margin-top: 30px;
  border-radius: 5px;
}

Aqui estamos creando 2 campos importantes el primero un width y un heigth que marcan el tamaño exacto de nuestra carta. Segundo los parámetros de transform-style donde colocamos preserve-3d para mantener la forma 3D al girar la carta y el tiempo en el que queremos que esta gire lo establecemos con transition. En este ejemplo 0.5 segundos

CSS de la figura

Este segundo elemento «Figure» lo usaremos para crear el contenedor propio de cada una de las imágenes que usaremos en la carta. La visión trasera y frontal.

.card figure {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    backface-visibility: hidden;
    box-shadow: 0 0 10px #4a4e69;
    border-radius: 5px;
}

CSS de la Imagen

Ahora haremos que la imagen que coloquemos vaya acorde al contenedor que hemos declarado en Figure

.image-custom {
  max-height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 5px;
}

CSS del giro

El ultimo tramo de código CSS que usaremos sera para la carta en vista frontal y el efecto de giro.

.front {
  transform: rotateY(180deg);
}

.flipped {
  transform: rotateY(180deg);
}

Observa que ambos los usamos con el efecto que genera transform y en este caso con un rotate en Y. En este caso en 180 grados para lograr el efecto de giro de la carta.

HTML de la carta a girar

Ahora colocamos el código en HTML que corresponde a la carta que queremos girar

 <div id="carta" class="card" onclick="giro()">
    <figure class="back" >
      <img src="https://hugoparrales.com/wp-content/uploads/2022/12/bocaabajo.jpg" class="image-custom">
    </figure>
    <figure class="front">
      <img src="https://hugoparrales.com/wp-content/uploads/2022/12/dragonazul.jpg" class="image-custom">
    </figure>
  </div>

Función Javascript para voltear la carta

Si observas el código en HTML nosotros estamos llamando a la función en el div con id=»carta» y al declarar la función onclick (al hacer clic) llamada giro.

Entonces nuestra función en JS queda:

function giro() { 
   var invocation = document.getElementById("carta");
   invocation.classList.add("flipped");
}

Esta función sencilla en Javascript lo que hace es tomar el elemento con ID «carta» y le añade el atributo CSS «flipped»

Al hacer esto ocurre la magia con CSS donde se genera el efecto de volteo o giro de carta

Resultado Final

A continuación te dejo el efecto ya funcional con Yu-Gi-Oh de ejemplo 😀