使用 CSS 创建旋转卡片

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 CSS 创建一个旋转卡片的概念。本实验的目的是教你如何创建一个交互式且引人入胜的用户界面元素,用于显示信息或图像。在本实验结束时,你将对如何使用 CSS 创建动态且视觉上吸引人的网页内容有扎实的理解。

旋转卡片

虚拟机中已经提供了 index.htmlstyle.css

要创建一个悬停时旋转的双面卡片,请按照以下步骤操作:

  1. 将卡片的 backface-visibility 设置为 none,以防止背面默认可见。
  2. 初始时,为卡片的背面设置 rotateY(-180deg),为卡片的正面设置 rotateY(0deg)
  3. 悬停时,为卡片的正面设置 rotateY(180deg),为卡片的背面设置 rotateY(0deg)
  4. 设置适当的 perspective 值以创建旋转效果。

以下是一个 HTML 和 CSS 代码示例:

<div class="card">
  <div class="card-side front">
    <div>正面</div>
  </div>
  <div class="card-side back">
    <div>背面</div>
  </div>
</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: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
}

.card-side.front {
  background: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

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

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

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你!你已经完成了旋转卡片实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程