炫酷的3D旋转卡片：用HTML5+CSS3构建可互动的数字名片

前端

2024-02-11 12:36:09

HTML5+CSS3小实例：3D旋转卡片

在现代网页设计中，动画和交互元素越来越受到重视。利用HTML5和CSS3，我们可以创建出各种令人惊叹的动画效果和交互式元素。在本文中，我们将介绍如何利用HTML5和CSS3创建3D旋转卡片，为您的项目增添视觉趣味和互动乐趣。

开发环境

在本例中，我们使用以下工具：

VS Code
HTML5
CSS3

步骤一：创建HTML文件

首先，我们需要创建一个HTML文件，用于容纳我们的3D旋转卡片。在VS Code中，新建一个HTML文件，并命名为“3d-card.html”。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <div class="front">
      <h1>3D旋转卡片</h1>
      <p>这是一个简单的3D旋转卡片实例。</p>
    </div>
    <div class="back">
      <h1>3D旋转卡片</h1>
      <p>这是卡片的背面。</p>
    </div>
  </div>
</body>
</html>

步骤二：创建CSS文件

接下来，我们需要创建一个CSS文件，用于为我们的3D旋转卡片添加样式。在VS Code中，新建一个CSS文件，并命名为“style.css”。

/* 基础样式 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 卡片样式 */

.card {
  width: 200px;
  height: 300px;
  margin: 100px auto;
  perspective: 1000px;
}

/* 卡片正面样式 */

.front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #f1f1f1;
  transform: rotateY(0deg);
  transition: transform 0.5s;
}

/* 卡片背面样式 */

.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #f1f1f1;
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

/* 鼠标悬停时卡片翻转动画 */

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

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