En esta publicación, aprenderemos cómo crear una elegante animación de tarjeta plegable en 3D usando HTML y CSS con fondos degradados.

Visita mi sitio web

Comprender la estructura

Usaremos dos lados de la tarjeta (anverso y reverso) para crear un efecto de volteo. Este efecto se activará al pasar el mouse, usando transiciones CSS.

    

      
Front Side
    
    

      
Back Side
    

Esta estructura HTML simple contiene un elemento div con dos lados: uno para el frente y otro para la parte posterior.

.card {
    perspective: 150rem;
    position: relative;
    height: 40rem;
    max-width: 400px;
    margin: 2rem;
    box-shadow: none;
    background: none;
  }

.card-side {
    height: 35rem;
    border-radius: 15px;
    transition: all 0.8s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding: 2rem;
    color: white;
}

.card-side.back {
    transform: rotateY(-180deg);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
}

.card:hover .card-side.back {
    transform: rotateY(0deg);
}

Demostración en vivo

backface-visibility: Oculta el contenido en el reverso de la tarjeta cuando el frente es visible, y viceversa.

establezca rotarY() para la parte posterior de la tarjeta en -180 grados y la parte frontal en 0 grados.

perspectiva: agrega profundidad al efecto 3D al permitir que la tarjeta parezca como si estuviera volteándose en el espacio.

Al pasar el cursor, establece el giroY() para la parte frontal en 180 grados y la parte trasera en 0 grados.

Conclusión

Con solo unas pocas líneas de HTML y CSS, puedes crear una impresionante animación de tarjeta plegable en 3D que agrega un toque dinámico a tu sitio web. Intenta experimentar con colores y efectos para hacerlo exclusivamente tuyo