css3卡牌点击翻转 |css中字体的设置

.card-container {
position: relative;
width: 200px;
height: 300px;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.card.front {
z-index: 2;
transform: rotateY(0deg);
}
.card.back {
transform: rotateY(180deg);
}
.card-container.flipped .card.front {
z-index: 1;
transform: rotateY(-180deg);
}
.card-container.flipped .card.back {
z-index: 2;
transform: rotateY(0deg);
}

其中，.card-container为卡牌容器的样式，.card为卡牌的样式，.card.front为卡牌正面的样式，.card.back为卡牌背面的样式。.card-container.flipped .card.front和.card-container.flipped .card.back为点击后翻转卡牌的样式。

在HTML中，需要添加如下元素：

<div class="card-container"><div class="card front">正面内容</div><div class="card back">背面内容</div></div>

需要注意的是，正面和背面内容的宽高应与卡牌容器相同，并且背面内容需要旋转180度。