Tarjeta volteada

681 ledoc

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

8 July 2025

Selección de personaje con animación de tarjeta de vista previa (sprites CSS)

13 June 2025

Tarjeta con degradado HTML

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

Selección de personaje con animación de tarjeta de vista previa (sprites CSS)

Tarjetas adhesivas apiladas

Tarjeta con degradado HTML

HTML

CSS

JS

Recomendado

Selección de personaje con animación de tarjeta de vista previa (sprites CSS)

Tarjetas adhesivas apiladas

Tarjeta con degradado HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS