首页Home › CSS 生成器CSS Generators
🃏 CSS 3D 翻转卡片生成器CSS 3D Flip Card Generator
生成纯 CSS 的 3D 翻转卡片：设置尺寸、翻转方向、触发方式、动画时长、透视距离和正反面颜色，实时预览并复制 HTML + CSS 代码。Generate a pure-CSS 3D flip card: set the size, flip axis, trigger, duration, perspective and front/back colours, preview it live and copy the HTML + CSS.
使用说明与常见问题How-to & FAQ
「CSS 3D 翻转卡片生成器」是什么？What is the CSS 3D Flip Card Generator tool?
生成纯 CSS 的 3D 翻转卡片：设置尺寸、翻转方向、触发方式、动画时长、透视距离和正反面颜色，实时预览并复制 HTML + CSS 代码。Generate a pure-CSS 3D flip card: set the size, flip axis, trigger, duration, perspective and front/back colours, preview it live and copy the HTML + CSS.
如何使用「CSS 3D 翻转卡片生成器」？How do I use the CSS 3D Flip Card Generator?
调整下方参数，把鼠标移到预览卡片上（或选择「点击翻转」后点击）查看翻转效果，复制生成的 HTML 和 CSS 放进页面即可；点击模式会额外附带一行 JavaScript。Adjust the settings, hover the preview card (or click it in click mode) to see the flip, then copy the HTML and CSS into your page; click mode adds one line of JavaScript.
为什么翻转后看到的是镜像文字？Why is the back text mirrored?
背面必须预先旋转 180°，并且正反两面都要设置 backface-visibility: hidden，否则翻过去后会看到正面的镜像。本工具生成的代码已经处理好了。The back face must be pre-rotated 180° and both faces need backface-visibility: hidden, otherwise you see a mirrored front. The generated code already does this.
手机上悬停翻转不好用怎么办？Hover flipping does not work on phones?
触屏设备没有真正的悬停，建议选择「点击翻转」，生成的代码会通过切换 flipped 类来翻转。Touch screens have no real hover, so choose Click; the generated code flips by toggling a flipped class.
「CSS 3D 翻转卡片生成器」免费吗？数据会上传吗？Is the CSS 3D Flip Card Generator free? Is my data uploaded?
「CSS 3D 翻转卡片生成器」完全免费，无需注册或安装，手机和电脑都能用；所有处理都在你的浏览器本地完成，输入的内容和文件不会上传到服务器。The CSS 3D Flip Card Generator is completely free with no sign-up or install and works on phones and desktops; everything runs locally in your browser and nothing you enter is uploaded.