37 lines
678 B
CSS
37 lines
678 B
CSS
@keyframes flip-card {
|
|
to {
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
|
|
.tarot-card--flip-automatically .tarot-card__content {
|
|
animation: flip-card 800ms 2s forwards;
|
|
}
|
|
|
|
.tarot-card--flip-on-hover {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.tarot-card--flip-on-hover:hover .tarot-card__content {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.tarot-card--flip-on-hover .tarot-card__content,
|
|
.tarot-card--flip-automatically .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);
|
|
}
|