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

一、引言

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

二、HTML 结构

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

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

三、CSS 样式解析

  1. 页面整体布局body元素通过display: flex;align-items: center;justify-content: center;设置了弹性布局,使得页面内容在垂直和水平方向上都居中显示,并且height: 100vh;确保了body占据整个视口的高度。
  2. 卡片容器样式card-container类定义了卡片容器的样式。width: 300px;height: 400px;设置了容器的宽度和高度。position: relative;使其成为相对定位元素,为内部的绝对定位元素提供参考。perspective: 1000px;属性为容器设置了透视效果,这是实现 3D 效果的关键,它决定了元素在 3D 空间中的深度感,数值越大,元素看起来越远,3D 效果越不明显;数值越小,3D 效果越强烈。
  3. 卡片正面和背面样式
    • coverback类都设置了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 度,即背面朝向用户。
  4. 鼠标悬停效果 :通过: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>
相关推荐
AndrewHZ12 小时前
【3D图像技术讨论】3A游戏场景重建实战指南:从数据采集到实时渲染的开源方案
人工智能·算法·游戏·3d·开源·llm·colmap
C+ 安口木13 小时前
CSS通用优惠券样式
前端·css
蓝莓味的口香糖15 小时前
【CSS】flex布局
前端·css
EveryPossible16 小时前
第一版代码
前端·javascript·css
杨超越luckly17 小时前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据
会飞的小菠菜1 天前
快速将多个PPT、PPTX幻灯片统一转换成浏览器能直接打开的HTML网页文件
html·powerpoint·浏览器·ppt·格式转换·网页
Filotimo_1 天前
2.CSS3.(2).html
前端·css
L李什么李1 天前
HTML——使用表格制作简历
前端·javascript·html
我有一棵树1 天前
html 滚动条相关开发经验总结
前端·javascript·html
爱吃甜品的糯米团子2 天前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css