body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: rgb(189, 248, 166);
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
margin-top: 25vh;
}
.card-wrapper {
display: inline-block;
perspective: 1000px;
}
.card {
position: relative;
width: 200px;
height: 300px;
cursor: pointer;
transition-duration: 0.6s;
transition-timing-function: ease-in-out;
transform-style: preserve-3d;
}
.card .front,
.card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
-webkit-box-shadow: -16px -5px 11px -12px rgba(0, 0, 0, 0.65);
-moz-box-shadow: -16px -5px 11px -12px rgba(0, 0, 0, 0.65);
box-shadow: -16px -5px 11px -12px rgba(0, 0, 0, 0.65);
}
.card .front {
z-index: 2;
color: #333;
background: #FFFFFF;
font-weight: 700;
font-size: 1rem;
}
.card .back {
font-size: 1.5rem;
color: #333;
background-color: rgb(127, 223, 89)
}
/* Animation classes */
.flip-right .card .back {
transform: rotateY(180deg);
}
.flip-right:hover .card {
transform: rotateY(180deg);
}
.flip-left .card .back {
transform: rotateY(-180deg);
}
.flip-left:hover .card {
transform: rotateY(-180deg);
}
.flip-up .card .back {
transform: rotateX(180deg);
}
.flip-up:hover .card {
transform: rotateX(180deg);
}
.flip-down .card .back {
transform: rotateX(-180deg);
}
.flip-down:hover .card {
transform: rotateX(-180deg);
}
.flip-diagonal-right .card .back {
transform: rotate3d(1, 1, 0, 180deg);
}
.flip-diagonal-right:hover .card {
transform: rotate3d(1, 1, 0, 180deg);
}
.flip-diagonal-left .card .back {
transform: rotate3d(1, 1, 0, -180deg);
}
.flip-diagonal-left:hover .card {
transform: rotate3d(1, 1, 0, -180deg);
}
.flip-inverted-diagonal-right .card .back {
transform: rotate3d(-1, 1, 0, 180deg);
}
.flip-inverted-diagonal-left:hover .card {
transform: rotate3d(1, -1, 0, 180deg);
}
.flip-inverted-diagonal-left .card .back {
transform: rotate3d(1, -1, 0, 180deg);
}