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

百变鹏仔 3天前 #JavaScript

文章标签如何使用

在这篇文章中，我们将了解如何使用 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度。

结论

只需几行 html 和 css，您就可以创建令人惊叹的 3d 翻转卡片动画，为您的网站增添动态感。尝试尝试颜色和效果，使其独一无二

文章推荐

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

了解结构

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？