3D 卡片翻转 CSS

可视化配置 3D 翻转效果，实时预览并生成完整 CSS 代码

3D 卡片翻转配置

调整参数实时预览，点击卡片触发翻转动画

实时预览（点击卡片翻转）
点击翻转
背面内容
生成 CSS 代码 
// 调整参数后此处自动更新...
广告位

使用说明

  1. 选择翻转方向：水平（rotateY 绕 Y 轴翻转）或垂直（rotateX 绕 X 轴翻转）
  2. 拖动滑块调整翻转角度（0-360°）、过渡时长（0.1-2s）、透视距离（400-2000px）
  3. 调整卡片宽度与高度以匹配你的应用场景
  4. 点击预览区的卡片或"翻转卡片"按钮，触发翻转动画预览
  5. 点击"重置"按钮恢复默认参数
  6. 点击"复制 CSS"按钮将生成的完整 CSS 代码复制到剪贴板

适用场景

  • 卡片悬停效果：用户头像、商品卡片正反面切换
  • 翻牌游戏：记忆翻牌、扑克翻面等小游戏
  • 登录注册切换：单卡片正反面切换登录/注册表单
  • 展示详情：悬停翻转查看更多详细信息
  • 教程引导：步骤翻转展示前后对比

安全保障

  • 本地生成：CSS 代码全部在浏览器本地生成
  • 无依赖：生成的 CSS 兼容所有现代浏览器
  • 无网络请求：参数调整过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

perspective 透视距离有什么作用？

perspective 定义观察者到 z=0 平面的距离，值越小透视效果越强（近大远小更明显），值越大越接近正交投影。建议 800-1500px 之间获得自然的 3D 效果。该属性必须设置在父容器上才能生效。

为什么 backface-visibility 很重要？

backface-visibility: hidden 让元素背面不可见，这是 3D 翻转卡片正反两面互不干扰的关键。若不设置或设为 visible，翻转过程中会看到镜像内容，影响视觉效果。需要同时设置 -webkit-backface-visibility 以兼容旧版 Safari。

transform-style: preserve-3d 是什么？

该属性让子元素在 3D 空间中保留自己的变换，而不是被父元素压平。对于翻转卡片场景必须设置在父容器上，否则正反两面会被压缩到同一平面，无法实现真正的 3D 翻转效果。

翻转角度可以不是 180° 吗？

可以。0-360° 任意角度都支持。常见用法是 180° 实现正反切换；也可以做 90° 部分翻转用于侧边露出；360° 用于循环翻转动画。但要注意小于 180° 时背面会部分可见，需要根据需求调整 backface-visibility。