持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

卡牌翻转效果我们也是经常见到的，比如翻牌抽奖、拥有特殊权限的人才可以看到背面的信息等等，接下来我们就来实现一个简单的卡牌翻转效果。

卡牌翻转

未知的才是神秘的，那么当你翻转卡牌的时候，你期待背面的是什么呢？

结构

<div class="card">
    <div class="just">？</div>
    <div class="back">幸运</div>
</div>

card的容器表示整个卡牌，just代表卡牌的正面，back则代表卡牌的反面，正反两面都可以自定义自己需要的内容。

样式

首先，我们需要把卡牌变成3D的，这是因为我们需要看的立体的翻转效果。其中，ransform-style: preserve-3d;表示所有子元素在3D空间中呈现。

.card {
    transform-style: preserve-3d;
    perspective: 500;
    position: relative;
    width: 10rem;
    height: 12rem;
    transition: all 1s linear;
}

.card:hover {
    transform: rotateY(180deg);
}

其次，我们需要给正反面添加样式，需要正反面背对背拥抱，所以back需要做个旋转180deg。其中，backface-visibility: hidden;表示元素背面隐藏。

.card div {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    text-align: center;
    line-height: 12rem;
    font-size: 2rem;
}

.card .just {
    background-color: #999;
}

.card .back {
    background-color: lightpink;
    transform: rotateY(180deg);
}

效果

当鼠标放到卡牌上时，卡牌会把背面内容翻转过来，详情请查看代码片段。

总结

这里只做了一个简易的翻牌效果，主要是提供一种思路。由于时间紧张，所以做的比较简陋，如果你想尝试，你可以把它做的更优雅一点，比如：

1. 可以给卡牌一个流光边框效果
2. 可以把正反面的样式做的更美一点
3. 可以把反面的内容给随机值
4. hover效果可以用鼠标移入移出事件代替，让动画更丝滑一点

如果你有更好的想法，可以留言交流，大家一起学习，一起成长。