css实现翻转卡片效果

<div class="flipbox">
<div class="side">side a</div>
<div class="side">side b</div>
</div>

.flipbox {
width: 100px;
height: 100px;
position: relative;
perspective: 1000px;
}
.flipbox:hover .side:nth-child(1) {
transform: rotateY(180deg);
}
.flipbox:hover .side:nth-child(2) {
transform: rotateY(0deg);
}
.side {
transition: 0.6s;
transform-style: preserve-3d;
backface-visibility: hidden;
width: inherit;
height: inherit;
}
.side:nth-child(1) {
background-color: red;
}
.side:nth-child(2) {
position: absolute;
background-color: green;
left: 0;
top: 0;
transform: rotateY(180deg);
}