HTML怎么做3D卡片翻转_html 3D卡片正反面翻转效果【纯干货】-html教程-PHP中文网

根本原因是未在卡片直接父容器设置transform-style: preserve-3d，导致3D变换退化为平面投影；还需配合perspective、backface-visibility: hidden及正确translateZ值才能实现真实翻转效果。

html怎么做3d卡片翻转_html 3d卡片正反面翻转效果【纯干货】

为什么 `transform: rotateY()` 翻不过去？

多数人卡在翻转后背面空白或内容错位，根本原因是没设 transform-style: preserve-3d。父容器（比如卡片容器）缺这句，子元素的 3D 变换就退化成平面投影，rotateY(180deg) 看起来像消失——其实只是被压扁在 Z=0 平面上，正面背面叠在一起了。

必须加在卡片的直接父容器上，且该容器不能有 overflow: hidden（会裁掉 Z 轴延伸部分）：

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.card:hover {
  transform: rotateY(180deg);
}

preserve-3d 不是加在翻转元素本身，而是它的父级（如 .card）
若用 backface-visibility: hidden 隐藏背面，只对真正需要遮挡的面生效，别乱加在父容器上
Chrome/Firefox 支持良好，但 Safari 旧版需加 -webkit-transform-style: preserve-3d

正反两面怎么写才不穿帮？

背面内容不是简单复制粘贴就能用。常见错误是两面都用默认 transform: translateZ(0)，导致翻转时没有深度分离，看起来像贴纸对折。

正确做法是给正面加 translateZ(50px)、背面加 translateZ(-50px)（数值按卡片尺寸调整），再配合 rotateY(180deg)，才能形成真实翻转感：

.card__front {
  transform: rotateY(0deg) translateZ(60px);
}
.card__back {
  transform: rotateY(180deg) translateZ(60px);
}

两面都要设 position: absolute 且 top/left 重合，否则翻转时会偏移
translateZ 值建议 ≥ 50px，太小（如 10px）在高 DPI 屏上几乎看不出立体感
别用 z-index 控制前后——3D 空间里它无效，靠 translateZ 和 rotate 的组合决定视觉顺序

hover 触发翻转在移动端失效怎么办？

纯 :hover 在 iOS/Android 上基本不可靠：触摸无 hover 状态，tap 后可能闪一下就回弹。必须补 JS 切换 class 才稳。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

最简方案：监听点击，切换一个 is-flipped 类，CSS 用该类控制 transform：

document.querySelector('.card').addEventListener('click', el => {
  el.classList.toggle('is-flipped');
});

.card.is-flipped {
  transform: rotateY(180deg);
}

别用 ontouchstart 单独处理——和 click 事件冲突，可能导致双触发
如果页面有多个卡片，用事件委托更高效：document.addEventListener('click', ...) + 判断 e.target.closest('.card')
加 cursor: pointer 提示可交互，尤其在桌面端