当前位置：首页 > news >正文

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

news 来源：原创 2025/8/23 5:17:12

一、引言

在网页设计中，为了增加用户的交互体验和视觉吸引力，常常会运用一些独特的效果。本文将详细介绍一个基于 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>

一、引言

二、HTML 结构

三、CSS 样式解析

相关文章：