基于 HTML 和 CSS 实现的 3D 翻转卡片效果

一、引言

在网页设计中，为了增加用户的交互体验和视觉吸引力，常常会运用一些独特的效果。本文将详细介绍一个基于 HTML 和 CSS 实现的 3D 翻转卡片效果，通过对代码的剖析，让你了解如何创建一个具有立体感的卡片，在鼠标悬停时实现前后两面的翻转切换。

二、HTML 结构

这段代码的 HTML 部分相对简洁，主要构建了卡片的基本结构。最外层是一个div元素，类名为card-container，它作为卡片的容器，用于包裹卡片的正面和背面。

在card-container内部，有两个div元素，分别是类名为cover的正面和类名为back的背面。cover和back都包含了一些文本内容（这里是 "COVER" 和 "BACK"，实际展示中图片会覆盖这些文本），它们的作用是分别展示卡片的两个不同面。

三、CSS 样式解析

页面整体布局 ：body元素通过display: flex;、align-items: center;和justify-content: center;设置了弹性布局，使得页面内容在垂直和水平方向上都居中显示，并且height: 100vh;确保了body占据整个视口的高度。
卡片容器样式 ：card-container类定义了卡片容器的样式。width: 300px;和height: 400px;设置了容器的宽度和高度。position: relative;使其成为相对定位元素，为内部的绝对定位元素提供参考。perspective: 1000px;属性为容器设置了透视效果，这是实现 3D 效果的关键，它决定了元素在 3D 空间中的深度感，数值越大，元素看起来越远，3D 效果越不明显；数值越小，3D 效果越强烈。
卡片正面和背面样式 ：
- cover和back类都设置了width: 100%;和height: 100%;，使其填满整个卡片容器。position: absolute;将它们设置为绝对定位，以便在容器内自由放置。backface-visibility: hidden;是一个重要的属性，它确保当元素翻转时，背面不会显示出来，从而实现真正的翻转效果。transition: transform 0.5s ease-in-out;定义了元素在变换（这里是翻转）时的过渡效果，持续时间为 0.5 秒，过渡效果为ease-in-out，即开始和结束时缓慢，中间过程较快。
- cover类通过background-image: url("./assets/movie-poster/m-byxz.jpg");设置了背景图片，background-size: cover;使背景图片完全覆盖元素，并且保持图片的纵横比。初始状态下，transform: rotateY(0deg);表示元素在 Y 轴上旋转 0 度，即正面朝向用户。
- back类同样通过background-image: url("./assets/movie-poster/m-dbs.jpg");和background-size: cover;设置背景图片。transform: rotateY(180deg);表示元素在 Y 轴上旋转 180 度，即背面朝向用户。
鼠标悬停效果 ：通过:hover伪类来实现鼠标悬停时的效果。当鼠标悬停在card-container上时，card-container:hover .cover规则使cover元素在 Y 轴上旋转 180 度，从而展示背面；card-container:hover .back规则使back元素在 Y 轴上旋转 0 度，展示正面，这样就实现了卡片的翻转效果。

完整代码展示

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./assets/global.css" />
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .card-container {
      width: 300px;
      height: 400px;
      position: relative;
      perspective: 1000px;
    }

    .cover,
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: hidden;
      transition: transform 0.5s ease-in-out;
    }

    .cover {
      background-image: url("./assets/movie-poster/m-byxz.jpg");
      background-size: cover;
      transform: rotateY(0deg);
    }

    .back {
      background-size: cover;
      background-image: url("./assets/movie-poster/m-dbs.jpg");
      transform: rotateY(180deg);
    }

    .card-container:hover .cover {
      transform: rotateY(180deg);
    }

    .card-container:hover .back {
      transform: rotateY(0deg);
    }
  </style>
</head>

<body>
  <div class="card-container">
    <div class="cover">COVER</div>
    <div class="back">BACK</div>
  </div>
</body>

</html>