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

Hugo Parrales

Doctor en Medicina. Emprendedor y Apasionado de la Informática. Con mas de 10 años de experiencia creando Sitios Web, programador y amante de las matemáticas.

hugoparrales.com

La entrada Efecto de volteo de carta con CSS y Javascript se publicó primero en Hugo Parrales.

Para que no te pase a ti te dejo en este rápido articulo como sumar 2 valores en Javascript de la forma correcta.

Función parseInt y parseFloat

Resulta que para poder sumar en javascript es necesario utilizar una función en concreto para números enteros y otra para numerosos decimales.

No es valido simplemente utilizar un operador aritmético como (+) dado que Javascript lo tomara como 2 lineas de texto y simplemente las concatenara (unira)

Entonces si nosotros tenemos este código:

var x = "2";
var y = "4";

var respuesta = x + y;

El resultado no sera 6 (que seria lo lógico porque 2 + 4 es 6) sino que será 24.

Si… esto porque Javascript toma por defecto a las variables como texto y no como numero. Entonces para poder sumar 2 números en Javascript necesitamos primero indicarle que esas variables son números.

Usaremos la función parseInt si los números que buscamos sumar son números enteros

Mientras que parseFloat la usaremos si la suma es con números decimales.

El código entonces quedaria asi:

var x = "2";
var y = "6";

var suma = parseInt(x) + parseInt(y);

Ahora si obtendremos la respuesta correcta que es 6.

Es importante aclarar que en este ejemplo lo hemos simplificado a unas variables textuales. Pero puede hacerse en combinación con procesos como el

document.getElementById("x").value;  

Lo que puede resultar muy útil por ejemplo para cálculos en tiempo real. Estos procesos son los que he aplicado por ejemplo en la Calculadora de salario.

Hugo Parrales

Doctor en Medicina. Emprendedor y Apasionado de la Informática. Con mas de 10 años de experiencia creando Sitios Web, programador y amante de las matemáticas.

hugoparrales.com

La entrada Como sumar 2 valores en Javascript se publicó primero en Hugo Parrales.

Condicionales en Javascript

En Javascript al igual que en otros lenguajes de programación contamos con los llamados condicionales.

Los condicionales son elementos que permiten establecer una secuencia de paso a partir del valor o comparación con un valor de una variable que nosotros definimos.

Las condiciones básicas de Javascript son: if, else, else if, y switch

Condición if en Javascript

La condición if es una condición simple que determina si una declaración o statment es verdadera.

La estructura es simple:

if (condición) {
  //  Aqui va todo lo que pasara si la condición es verdadera :)
}

Establecer la condición queda a criterio del programador. Se pueden emplear variables dinámicas o fijas para poder ejecutar código.

Por ejemplo con una variable fija como una hora en especifico del dia:

if (new Date().getHours() < 12) {
  document.getElementById("demo").innerHTML = "Buenos dias!";
}

En el ejemplo anterior la función new Date().getHours() devuelve la hora actual y la compara con una variable fija que es el 12.

La función if en javascript también puede aplicarse con variables dinamicas

var n = document.getElementById("contador").value;
var x = document.getElementById("respuesta").value;
if (n < x) {
  var y = "La respuesta esta en tu corazon";
}

En el ejemplo anterior se utilizan dos variables dinámicas que salen de 2 elementos con Id establecido. La condición las compara y determina mediante una expresión y comparación matemática. En este ejemplo se busca determinar si «x» es mayor que «n»

Si se cumple que la condición if es verdadera entonces la variable «y» toma el texto que hemos establecido. Al cumplirse la condición if en nuestro código también podríamos ejecutar alguna función o llamar a algún elemento.

Hugo Parrales

Doctor en Medicina. Emprendedor y Apasionado de la Informática. Con mas de 10 años de experiencia creando Sitios Web, programador y amante de las matemáticas.

hugoparrales.com

La entrada if en Javascript se publicó primero en Hugo Parrales.