Flip 3D-card CSS
В редакторе
Flip 3D-card CSS
gofi
1258
2018-12-21 15:04:29
<div class="wrap">
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
</div>
body {
font-family: sans-serif;
}
.wrap {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 300px;
position: relative;
perspective: 1000px;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
backface-visibility: hidden;
border-radius: 10px;
}
.front {
background-color: #fff;
}
.back {
background-color: #BDBDBD;
transform: rotateY(180deg);
}
.card:hover .front {transform: rotateY(180deg);}
.card:hover .back {transform: rotateY(360deg);}
Войдите для добавления комментария.