它是一个3D 翻转卡片的“可视化调节器”。
翻转卡片是一种常见的网页交互效果——鼠标悬停或点击时，卡片会像翻牌一样翻过来，正面变反面。常用于展示信息、产品介绍、名片、记忆游戏等。
这种效果要用 perspective、transform-style: preserve-3d、backface-visibility 等一堆 CSS 属性配合，手动写容易出错。这个小工具把这些变成了可视化参数，拖一拖、改一改就能调出想要的效果，还自动生成代码。
主要能做什么？
触发方式可选：
悬停翻转（:hover）
点击翻转（.flipped）
翻转方向可选：
Y 轴水平翻转（rotateY）
X 轴垂直翻转（rotateX）
动画时长：0.1~5 秒可调。
卡片尺寸：宽、高都能自定义。
圆角大小：0~100px。
正反两面内容：
正面文案
正面背景色（取色器 + HEX 输入）
正面文字颜色
反面文案
反面背景色
反面文字颜色
实时预览：改任何参数，上面的卡片立刻更新，点击或悬停就能测试翻转效果。
代码生成：
HTML 结构（可直接复制）
CSS 样式（完整规则，可直接复制）
一键复制全量代码（HTML + CSS 一起）
重置默认参数：一键恢复初始值。
适合谁用？
前端开发者：做翻转卡片时快速调参数。
网页设计师：设计交互卡片、产品展示时看效果。
做个人主页的人：名片、简介卡片翻转效果。
做小游戏的人：记忆翻牌游戏的基础样式。
写教程的人：演示 3D 翻转卡片的实现。
学 CSS 的人：理解 transform、perspective、backface-visibility 等属性。
任何想要翻转卡片效果的人。
用起来是什么感觉？
打开页面，顶部是一个深色大卡片，写着“CSS 3D 卡片翻转生成器 v1.0”，状态栏提示“可视化配置与 3D 效果实时渲染导出”。
下面是实时预览区，中间一张卡片，默认正面紫色、反面蓝色，写着“Front Card / Back Card”。鼠标悬停上去，卡片就会翻过来，松手又翻回去。
再下面是参数配置区，12 个设置项分三列排布：
触发翻转模式（悬停 / 点击）
翻转方向（Y 轴 / X 轴）
动画时长
卡片宽度、高度、圆角
正面文案、背景色、文字颜色
反面文案、背景色、文字颜色
颜色都是取色器 + HEX 输入框双向联动，随便改哪个都行。
改任何参数，上面的卡片立刻更新，点一下或悬停就能测翻转效果。
再下面是代码导出区，两块：
HTML 结构：带复制按钮
CSS 样式：带复制按钮
底部两个按钮：
重置默认参数：恢复初始值
一键复制全量代码 (HTML + CSS)（绿色）：两段一起复制
操作流程就是：
改参数，看预览
点一下卡片测试翻转
满意了点“复制 HTML”或“复制 CSS”
粘到项目里，改个选择器就能用
整个过程实时反馈、所见即所得。
对做交互卡片、想学 CSS 3D 的人来说，比手写代码、反复试参数快多了，理解起来也直观。