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

用HTML制作3d翻转卡片

news 2026/7/3 4:09:40

前言

在做商品展示、相册、个人名片页面时，立体翻转卡片能大幅提升页面高级感。很多同学实现翻牌效果会依赖 JavaScript 动画，其实只用原生 CSS3 3D 变换就能完成流畅立体翻面，代码轻量化、浏览器渲染性能更好，兼容性覆盖所有现代浏览器。

今天给大家分享一套完整可运行的 3D 翻转卡片 Demo，鼠标悬浮卡片自动沿 Y 轴 180° 立体翻转，正反面分别展示两张图片，自带圆角、阴影、丝滑过渡动画，零基础前端也能看懂，替换图片路径即可直接投入项目使用。

效果预览

页面使用 flex 实现卡片水平垂直居中，深色背景衬托卡片层次感；鼠标移入卡片后，卡片立体翻转，正面图片平滑切换为背面图片，翻转过程不会出现双面重叠、镜像穿透的 bug；图片自动铺满卡片不变形，圆角完整不溢出。

核心关键属性讲解

想要实现 3D 翻转，下面三个 CSS 属性缺一不可，也是整个案例的核心：

perspective：设置在最外层父容器，代表人眼到卡片的透视距离，数值越小立体冲击感越强，示例中 800px 是兼顾美观与柔和的通用值；
transform-style: preserve-3d：开启子元素 3D 渲染空间，不加这条属性，翻转会变成扁平 2D 旋转，丢失立体效果；
backface-visibility: hidden：隐藏元素背面，解决翻转时正反面互相穿透、镜像重叠的问题；辅助属性：transition搭配贝塞尔缓动函数，让翻转动画过渡更自然顺滑

完整可运行源码

html

预览

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D翻转卡片</title> <style> /* 页面全局：全屏居中卡片 */ body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #2c3e50; } /* 外层透视容器，承载景深 */ .card-container { width: 250px; height: 350px; perspective: 800px; cursor: pointer; } /* 翻转载体，开启3D空间+过渡动画 */ .card-inner { width: 100%; height: 100%; position: relative; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } /* 鼠标悬浮触发180度翻转 */ .card-container:hover .card-inner { transform: rotateY(180deg); } /* 正反面公共样式 */ .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); overflow: hidden; } /* 图片铺满卡片，自适应不拉伸 */ .card-front img, .card-back img { width: 100%; height: 100%; object-fit: cover; } /* 背面默认旋转180°，初始隐藏 */ .card-back { transform: rotateY(180deg); } </style> </head> <body> <!-- 三层DOM结构：透视容器 → 旋转层 → 正反面 --> <div class="card-container"> <div class="card-inner"> <!-- 卡片正面图片 --> <div class="card-front"> <img src="img/20150307162556_ixeWE.thumb.1000_0.png"> </div> <!-- 卡片背面图片 --> <div class="card-back"> <img src="img/202003242142424_zgozk.jpg"> </div> </div> </div> </body> </html>