使用CSS的transform和animation实现卡片翻转缩放，1. HTML结构包含前后两面；2. 父容器设perspective和preserve-3d，子元素用backface-visibility隐藏背面；3. @keyframes定义rotateY与scale动画；4. hover时触发front和back的动画或直接应用transform，实现流畅翻转缩放效果。
想要在网页中实现卡片翻转并带有缩放效果的动画，可以通过 CSS 的 transform 和 animation 属性来完成。核心思路是利用 rotateY 实现水平翻转，结合 scale 控制卡片大小变化，再通过 @keyframes 定义动画过程。
一个典型的翻转卡片包含前后两个面，通常用一个容器包裹两个子元素：
<div class="card"> <div class="card-face front">正面内容</div> <div class="card-face back">背面内容</div> </div>
为了让 rotateY 生效，必须在父容器上启用 3D 渲染上下文。使用 perspective 控制观察距离，transform-style: preserve-3d 确保子元素也在3D空间中。
.card {
width: 200px;
height: 300px;
perspective: 1000px;
position: relative;
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: transform 0.6s;
}
.front {
background: #4CAF50;
color: white;
}
.back {
background: #2196F3;
color: white;
transform: rotateY(180deg);
}
backface-visibility: hidden 是关键，它让卡片背面在不可见时隐藏。
立即学习“前端免费学习笔记（深入）”；
使用 @keyframes 创建一个从初始状态到翻转+缩放的动画序列：
@keyframes flipAndScale {
0% {
transform: rotateY(0) scale(1);
}
50% {
transform: rotateY(90deg) scale(1.1);
}
100% {
transform: rotateY(180deg) scale(1);
}
}
这个动画过程中，卡片先开始旋转，在中间阶段略微放大，完成翻转后恢复原始大小。
将动画绑定到卡片容器或特定状态（如悬停）：
.card:hover .front {
animation: flipAndScale 0.6s forwards;
}
.card:hover .back {
animation: flipAndScale 0.6s forwards;
animation-delay: 0.6s;
}
或者更简洁地控制整个卡片容器触发翻转：
.card:hover .front {
transform: rotateY(180deg) scale(1.05);
}
.card:hover .back {
transform: rotateY(0deg) scale(1.05);
}
配合 transform-origin: center 可确保围绕中心翻转，避免偏移。
基本上就这些。通过合理组合 rotateY、scale 和 animation，就能实现流畅自然的卡片翻转缩放效果，适用于产品展示、图片墙、信息提示等场景。关键是理解 3D 变换的层级关系和 backface-visibility 的作用。不复杂但容易忽略细节。
以上就是如何在CSS中实现卡片翻转缩放动画_使用CSS animation结合transform rotateY scale实现翻转缩放的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
247
收藏
