84 lines
1.9 KiB
CSS
84 lines
1.9 KiB
CSS
.fliping-card {
|
|
flex: initial;
|
|
position: relative;
|
|
height: 200px;
|
|
width: 200px;
|
|
-moz-perspective: 200rem;
|
|
perspective: 200rem;
|
|
}
|
|
|
|
.fliping-card__side {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all 0.8s ease;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
-webkit-backface-visibility: hidden; /* We don't want to see the back part of the element. */
|
|
backface-visibility: hidden; /* We don't want to see the back part of the element. */
|
|
border-radius: var(--bs-border-radius);
|
|
overflow: hidden; /* The image is overflowing the parent. */
|
|
box-shadow: 0 2rem 6rem rgba(#000, 0.15);
|
|
}
|
|
|
|
.fliping-card__side--back {
|
|
border: 1px solid #c0c0c0;
|
|
color: white;
|
|
height: 100%;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.fliping-card__side--back-male {
|
|
background-color: #0d6efd;
|
|
}
|
|
|
|
.fliping-card__side--back-female {
|
|
background-color: #fd0d99;
|
|
}
|
|
|
|
.fliping-card__side--front-adopted {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.fliping-card__side--back a {
|
|
color: white;
|
|
}
|
|
|
|
.fliping-card:hover .fliping-card__side--back {
|
|
transform: rotateY(0);
|
|
}
|
|
|
|
.fliping-card:hover .fliping-card__side--front {
|
|
transform: rotateY(-180deg);
|
|
}
|
|
|
|
@media only screen and (max-width: 575px), only screen and (hover: none) {
|
|
.fliping-card {
|
|
height: 350px;
|
|
-moz-perspective: none;
|
|
perspective: none;
|
|
}
|
|
|
|
.fliping-card__side {
|
|
height: auto;
|
|
position: relative;
|
|
box-shadow: none;
|
|
}
|
|
.fliping-card__side--front {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom: 0px;
|
|
}
|
|
.fliping-card:hover .fliping-card__side--front {
|
|
transform: rotateY(0);
|
|
}
|
|
.fliping-card__side--back {
|
|
border: 0px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
transform: rotateY(0);
|
|
}
|
|
}
|