Tarjeta volteada

1371 ledoc

Abrir en el editor Publica tu código

Recomendado

21 September 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);
}

Tarjeta volteada

Recomendado

Tarjeta Shake

Información de la tarjeta

Efecto de desplazamiento de tarjeta 3D

HTML

CSS

JS

Recomendado

Tarjeta Shake

Información de la tarjeta

Efecto de desplazamiento de tarjeta 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS