Tarjeta volteada

1576 ledoc

Abrir en el editor Video Publica tu código

Recomendado

14 June 2024

Tarjeta animada de redes sociales.

20 August 2024

Tarjeta de volteo de precios

30 August 2024

Efecto de desplazamiento de tarjeta 3D

HTML

CSS

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.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 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #bbb;
    color: black;
}

.flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
}

/* Ajout de l'effet de survol */
.flip-card-front:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Ajoute une ombre */
    transform: scale(1.05); /* Légère augmentation de la taille */
    transition: transform 0.3s ease-in-out; /* Ajoute une transition douce */
}

.flip-card-back:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.flip-card-inner {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.flip-card-back {
    background: linear-gradient(135deg, #2980b9, #6dd5fa);
}

Recomendado

Tarjeta animada de redes sociales.

Tarjeta de volteo de precios

Efecto de desplazamiento de tarjeta 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS