核心是利用perspective、transform-style和backface-visibility配合@keyframes实现3D翻转。首先构建包含前后两面的卡片结构，设置外层容器的perspective营造3D视觉，添加transform-style: preserve-3d确保子元素处于3D空间，通过backface-visibility: hidden隐藏元素背面。正面初始不旋转，背面使用transform: rotateY(180deg)预设翻转状态。利用@keyframes定义从rotateY(0deg)到180deg的动画关键帧，再将动画绑定至.card:hover或设置为无限循环实现自动翻转，最终达成平滑的3D卡片翻转效果。
要使用CSS animation 制作卡片翻转3D效果，核心是结合 transform、perspective 和 @keyframes 实现立体旋转动画。下面一步步说明如何实现一个鼠标悬停时翻转180度的3D卡片效果。
1. 基本HTML结构
卡片通常由一个外层容器和前后两个面组成：
正面内容背面内容
2. 设置3D空间与容器样式
外层容器需要设置透视（perspective）来产生3D视觉效果，并启用3D变换：
.card { width: 200px; height: 300px; position: relative; perspective: 1000px; /* 重要：添加3D透视感 */ margin: 50px auto;}.card-face {width: 100%;height: 100%;position: absolute;backface-visibility: hidden; / 关键：隐藏背面 /border-radius: 10px;display: flex;align-items: center;justify-content: center;font-size: 18px;color: white;}
.front {background-color: #3498db;z-index: 2;}
.back {background-color: #e74c3c;transform: rotateY(180deg); / 背面初始旋转180度 /}
3. 定义翻转动画
使用 @keyframes 定义从0到180度的Y轴旋转：
立即学习“前端免费学习笔记（深入）”；
@keyframes flip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); }}
然后应用动画到卡片整体或前后面。但更推荐用 transition 实现交互式翻转，若坚持用 animation 触发，可这样写：
稿定抠图
AI自动消除图片背景
76 查看详情
.card:hover .front { animation: flip 0.6s forwards;}.card:hover .back {animation: flip-reverse 0.6s forwards;}
@keyframes flip-reverse {from {transform: rotateY(180deg);}to {transform: rotateY(360deg);}}
不过更常见且流畅的做法是用 transition 配合状态变化。如果一定要用 animation 实现自动翻转，可以这样：
.card { animation: auto-flip 3s infinite alternate;}@keyframes auto-flip {to {transform: rotateY(180deg);}}
记得给 .card 添加 transform-style: preserve-3d; 以保持子元素在3D空间中：
.card { perspective: 1000px; transform-style: preserve-3d;}
4. 完整示例（自动翻转）
整合所有代码实现自动3D翻转：
.card { width: 200px; height: 300px; position: relative; perspective: 1000px; margin: 50px auto; transform-style: preserve-3d; animation: auto-flip 3s infinite alternate;}@keyframes auto-flip {to {transform: rotateY(180deg);}}
.card-face {width: 100%;height: 100%;position: absolute;backface-visibility: hidden;border-radius: 10px;display: flex;align-items: center;justify-content: center;font-size: 18px;color: white;}
.front { background: #3498db; }.back {background: #e74c3c;transform: rotateY(180deg);}
基本上就这些。关键是 perspective、transform-style: preserve-3d 和 backface-visibility: hidden 这三个属性配合动画或过渡，才能呈现出干净的3D翻转效果。
以上就是在css中如何用animation制作卡片翻转3D效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1020697.html
微信扫一扫 
支付宝扫一扫 
