使用纯 CSS 构建翻转卡片动画

介绍

翻页卡片动画不仅可以为任何网页提供功能性和易用性，还可以让您的网站感觉更加精致、用户友好，最重要的是，更加现代和值得信赖。

该动画完美地诠释了如何将现实世界的动作和功能引入网络，并通过这种方式提高用户体验。

以下是一些翻转卡片动画的应用场景：

• 无论是闪卡，还是任何能揭示其他信息的东西——翻牌动画都非常擅长揭示各种隐藏信息，尤其当这些隐藏信息与一条看似“公开”的信息直接相关时。闪卡就是一个典型的例子，例如Quizlet网站上的单词释义闪卡。一个更直观的例子是扑克牌，牌的背面和正面分别印有牌面、数字和花色。
• 登录和注册表单——翻页卡片动画非常适合包含两个选项的内容。网站上的登录和注册表单就是一个很好的例子。通常，它们位于两个不同的页面上，但一个值得考虑的方案是将两个表单放在同一个页面上，每个表单分别位于一张翻页卡片上（一张在背面，另一张在正面），用户可以通过 CSS 来翻转卡片，从而选择登录或注册。

让我们开始编写CSS代码吧！

幸运的是，借助新的、现代的 CSS 属性和样式，我们可以用很少的代码快速构建这种动画和功能，同时还能使其看起来非常专业和新颖。

如果您有兴趣，可以查看一下最终的 CodePen 示例。

首先，我们将编写卡片的基本 HTML 和 CSS 代码。卡片将包含一个容器（我们将使用 CSS 实现该容器的翻转效果），该容器将包含两个子元素：正面元素和背面元素。所有子元素和容器在 CSS 中都设置了完全相同的高度和宽度，这对于实现翻转效果至关重要。除此之外，以下所有其他样式仅用于示例，您可以根据自身需求进行完全更改。

<div class="card-container">
    <div class="front">Front Side</div>
    <div class="back">Back Side</div>
</div>

.card-container, .front, .back {
    width: 20rem;
    height: 20rem;
}
.card-container {
    margin: 5rem;
}
.front, .back {
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25);

    font-family: BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
/* front side bg is green gradient */ .front {
    background-image: linear-gradient(to right bottom, #2ecc71, #229955);
}
/* back side bg is orange gradient */ .back {
    background-image: linear-gradient(to right bottom, #f1c40f, #e67e22);
}

这样我们就得到了类似这样的结果，实际上包含了除实际翻牌动画之外的所有元素：

现在我们已经有了基本样式，接下来我们将构建实际的动画。

第一步是将卡片的两侧绝对定位到容器的左上角（容器的定位方式我们设置为相对定位）。同时，我们将“背面可见性”设置为隐藏，这意味着当正面显示时，用户看不到翻转卡片的背面。接下来是动画的关键——“transform: rotateY”属性，我们将通过该属性实现两侧的过渡效果。卡片背面最初会绕y轴旋转180度，因此会被“背面可见性”属性隐藏。当我们翻转卡片时（本例中为鼠标悬停时，当然您可以根据需要更改触发条件），背面会旋转0度，正面会旋转180度。所有这些变化都通过CSS过渡来实现，从而形成我们想要的炫酷动画效果。您当然可以根据需要更改过渡时间或定时函数，但其​​他样式应保持不变，以确保动画效果完美。

.card-container {
    position: relative;
}
.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    overflow: hidden;
    transition: transform .8s ease;
}
.back {
    transform: rotateY(180deg);
}
.card-container:hover .front {
    transform: rotateY(-180deg);
}
.card-container:hover .back {
    transform: rotateY(0deg);
}

至此，我们几乎完成了，但为了让整体效果更加流畅，还需要添加最后一样东西，那就是 CSS 的 perspective 属性。specialstyle 属性可以让过渡效果看起来像 3D 一样。我们将此属性添加到父元素，在本例中是容器。该属性的值会影响最终效果，所以请随意尝试调整！

.card-container {
    perspective: 75rem;
}

如果你有兴趣，可以看看最终的 CodePen 示例。

结论

总而言之，翻牌动画是任何网站的绝佳附加功能。它能为页面增添独特的现代感，并且用途广泛。我今天在一个 JavaScript 记忆游戏中就看到了它的身影，如今它在许多现代网站上都非常流行。翻牌动画确实能为任何设计增色不少。

当然，它也有一些局限性，尤其是在移动设备上，悬停效果和图形方面存在一些问题；当然，一些新的 CSS 属性可能不受 IE 等较旧的浏览器或 KaiOS 等不太常用的浏览器的支持。

希望您喜欢这篇文章，文中所有代码均采用 CC0 许可，这意味着您可以无需任何形式的署名即可使用。

如果你喜欢这篇文章，请点个赞❤️，感谢浏览。

— 加布里埃尔·罗穆阿尔多，2019 年 11 月 26 日