CSS翻转动画：如何做到

2023-01-06 小编

在网站设计方面，重要的是要将用户体验放在首位。是的，这意味着确保您的网站在视觉上吸引访问者！成功执行此操作的一种方法是将 CSS 翻转动画添加到您的网站。

立即下载： 35 个代码模板 [免费代码片段]

在这篇文章中，我们将引导您了解如何创建翻转卡动画 CSS 样式的复杂性。您还将了解为什么将 CSS 翻转动画添加到您的网站是实用的，以及这会在您的网站上脱颖而出的一些地方。

如何创建翻转卡动画 CSS
为什么创建 CSS 翻转动画很有用？
开始使用 CSS 翻转动画为您的网站添加风格。

如何创建翻转卡动画 CSS

首先，我们将使用一些 HTML 开始创建我们的 CSS 翻转动画。

以下是您将用于入门的 HTML 代码。

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
     <img src="INSERT YOUR IMAGE IN <img /> FORMAT HERE" alt="ADD YOUR ALT TEXT HERE">
    </div>
    <div class="flip-card-back">
      <h1>INSERT YOUR HEADER FOR BACK OF CARD HERE</h1>
      <p>Include first sentence to appear on back of card</p>
      <p>Include second sentence to appear on back of card</p>
    </div>
  </div></div>

请记住，您还可以在背面添加图像而不仅仅是文本，或者您可以完全放弃图像并选择正面的文本。

现在，是时候添加 CSS 了。

.flip-card {
  background-color: transparent;
  width: 400px;
  height: 400px;
  border: 2px solid #f1f1f1;
  perspective: 1000px;}.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;}.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);}.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;}.flip-card-front {
  background-color: #bbb;
  color: red;}.flip-card-back {
  background-color: red;
  color: white;
  transform: rotateY(180deg);}

请记住，这些是完全可定制的。您可以决定将翻转卡背景颜色设置为橙色、字体白色、正面绿色、宽度为 500 像素等。由您决定您希望翻转卡的外观，您可以相应地调整代码。

稍后我们将详细介绍您可以使用此功能的方法。下面是我们创建的示例。假设您有一家蜡烛电子商务商店。您可以使用 CSS 翻转动画来展示蜡烛并提供有关产品的更多详细信息。

CSS 翻转动画：显示最终结果的外观