49 lines
845 B
CSS
49 lines
845 B
CSS
#container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
flex-wrap: wrap;
|
|
/* position: relative; */
|
|
perspective: 20000px;
|
|
margin:1rem;
|
|
/* margin: 20px auto; */
|
|
/* border-radius: 100px; */
|
|
}
|
|
|
|
.card {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: flex;
|
|
/* position: absolute; */
|
|
transform-style: preserve-3d;
|
|
transition: transform .5s;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.card figure {
|
|
margin: 0;
|
|
padding: .5rem;
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
border-radius: 100px;
|
|
/* border-radius: 100px; */
|
|
}
|
|
|
|
.card .front {
|
|
background: lightseagreen
|
|
}
|
|
|
|
.card .back {
|
|
background: lightsalmon;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.card.flipped {
|
|
transform: rotateY(180deg);
|
|
} |