Tarjeta volteada

1,712 ledoc

Abrir en el editor Publica tu código

Recomendado

20 August 2024

Tarjeta de bicicleta Pure CSS

17 May 2025

Tarjeta moderna con giro

14 October 2023

Panel de tarjetas

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