怎么用？
填正反面文字、选水平/垂直翻转、选配色，鼠标移到预览卡上看翻转，点「复制代码」拿走 HTML+CSS。
移动端提示
触屏无 hover。要在手机上生效，可把 :hover 改成点击切换 class（加一小段 JS）或用 :focus-within。
关于 chdh.me 在线工具
同类还有 新拟态生成器、box-shadow 生成器、毛玻璃生成器，均纯前端运行、不上传、不追踪。
3D 卡片翻转效果生成器
设置正反面内容、翻转方向、配色，悬停预览3D 翻转并复制 HTML/CSS。纯前端。
把鼠标移到卡片上预览翻转
正面背面
HTML + CSS
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">正面 Front</div>
<div class="flip-card-back">背面 Back</div>
</div>
</div>
<style>
.flip-card { width: 220px; height: 140px; perspective: 1000px; }
.flip-card-inner {
position: relative; width: 100%; height: 100%;
transition: transform .6s; transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
position: absolute; inset: 0; backface-visibility: hidden;
display: flex; align-items: center; justify-content: center;
border-radius: 12px; color: #fff; font-weight: 600;
}
.flip-card-front { background: #6366F1; }
.flip-card-back { background: #8B5CF6; transform: rotateY(180deg); }
</style>