2023-12-02 13:12:22 +00:00
|
|
|
:root {
|
|
|
|
--min-flip-card-height: 80vh;
|
|
|
|
}
|
|
|
|
|
2023-12-02 13:30:23 +00:00
|
|
|
@keyframes flip-card {
|
|
|
|
to {
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.tarot-card--flip-on-hover,
|
|
|
|
.tarot-card--flip-automatically {
|
2023-12-02 13:12:22 +00:00
|
|
|
min-height: var(--min-flip-card-height);
|
2023-12-02 13:30:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.tarot-card--flip-automatically .tarot-card__content {
|
|
|
|
animation: flip-card 800ms 2s forwards;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tarot-card--flip-on-hover {
|
2023-12-02 13:12:22 +00:00
|
|
|
perspective: 1000px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tarot-card--flip-on-hover:hover .tarot-card__content {
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
}
|
|
|
|
|
2023-12-02 13:30:23 +00:00
|
|
|
.tarot-card--flip-on-hover .tarot-card__content,
|
|
|
|
.tarot-card--flip-automatically .tarot-card__content {
|
2023-12-02 13:12:22 +00:00
|
|
|
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);
|
|
|
|
}
|