CSS 翻转卡片

选择翻转轴(X / Y)、过渡时长、透视距离与圆角,工具会生成一套 3D 翻转卡片(flip card)所需的 HTML 结构与 CSS 代码。鼠标悬停时卡片会沿指定轴翻转,露出背面内容。全部在浏览器本地完成。

翻转设置 等待输入

透视值越小,3D 效果越夸张;时长控制翻转速度。

生成结果
轴—
时长—
设置参数后点击生成,HTML 与 CSS 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

使用说明
  • 父容器设置 perspective 才会产生 3D 透视效果。
  • 内层使用 transform-style: preserve-3d 保留子元素的三维空间。
  • rotateY(180deg) 沿纵轴翻转,rotateX(180deg) 沿横轴翻转。
  • 正背两面设置 backface-visibility: hidden 隐藏背面。
  • 背面需预先旋转 180 度,翻转后才显示正面朝向。