如何使用纯 CSS 创建翻牌动画

CSS

---

.card {

margin: auto;

width: 300px;

height: 400px;

perspective: 1000px;

background-color: transparent;

}

.card__content {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: all 1s;

transform-style: preserve-3d;

box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);

}

.card:hover .card__content {

transform: rotateY(180deg);

}

.card__front,

.card__back {

position: absolute;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

display: flex;

justify-content: center;

align-items: center;

color: white;

}

.card__front {

background-color: red;

font-size: 150px;