Carta capovolta

869 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

20 June 2025

Modulo di registrazione di accesso HTML con effetto carta 3D

8 January 2025

Effetto carta

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

Carta capovolta

Consigliato

Modulo di registrazione di accesso HTML con effetto carta 3D

Carta 3D

Effetto carta

HTML

CSS

JS

Consigliato

Modulo di registrazione di accesso HTML con effetto carta 3D

Carta 3D

Effetto carta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS