31 lines
535 B
CSS
31 lines
535 B
CSS
:root {
|
|
--min-flip-card-height: 80vh;
|
|
}
|
|
|
|
.tarot-card--flip-on-hover {
|
|
min-height: var(--min-flip-card-height);
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.tarot-card--flip-on-hover:hover .tarot-card__content {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.tarot-card--flip-on-hover .tarot-card__content {
|
|
transition: transform 800ms;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.tarot-card__side {
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.tarot-card__side--back {
|
|
transform: rotateY(180deg);
|
|
}
|