当前位置：首页 > 文章列表 > 文章 > 前端 > 如何使用 HTML 和 CSS 创建翻页卡动画

如何使用 HTML 和 CSS 创建翻页卡动画

来源：dev.to 2024-11-26 11:12:28 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《如何使用 HTML 和 CSS 创建翻页卡动画》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

在这篇文章中，我们将了解如何使用 html 和 css 以及渐变背景创建时尚的 3d 翻转卡片动画。

访问我的网站

了解结构

我们将使用卡片的两侧（正面和背面）来创建翻转效果。此效果将在悬停时使用 css 过渡激活。

<div class="card">
    <div class="card-side front">
      <div>front side</div>
    </div>
    <div class="card-side back">
      <div>back side</div>
    </div>
</div>

这个简单的 html 结构包含一个具有两侧的 div 元素：一侧为正面，一侧为背面。

.card {
    perspective: 150rem;
    position: relative;
    height: 40rem;
    max-width: 400px;
    margin: 2rem;
    box-shadow: none;
    background: none;
  }

.card-side {
    height: 35rem;
    border-radius: 15px;
    transition: all 0.8s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding: 2rem;
    color: white;
}

.card-side.back {
    transform: rotateY(-180deg);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

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

.card:hover .card-side.back {
    transform: rotateY(0deg);
}

现场演示

backface-visibility：当正面可见时隐藏卡片背面的内容，反之亦然。

将卡片背面的rotatey()设置为-180deg，将正面设置为0deg。

透视：通过让卡片看起来就像在空间中翻转一样增加 3d 效果的深度。

悬停时，将前侧的rotatey()设置为180度，后侧设置为0度。