3D 开门效果（铰链旋转门板 CSS 动画）

效果演示（真实可交互）

点击演示区的门板或下方按钮，门会绕左侧铰链 3D 旋转打开，露出藏在门后的「房间内部」。开门动画使用带轻微过冲的回弹缓动曲线，门板会先开过头一点再回正，像真实房门一样有弹性；打开后门把手自动翻面朝向观者，合页细节保留在门框上。

完整代码

HTML（门框、内部、门板三层结构）：

<div class="do3d-scene">
  <div class="do3d-frame" id="frame">
    <div class="do3d-interior">房间内部</div>
    <div class="do3d-door" id="door">
      <span class="do3d-handle"></span>
      <span class="do3d-hinge"></span>
    </div>
  </div>
</div>

CSS（开门动画的关键三行）：

.do3d-scene { perspective: 1100px; }          /* 3D 视距 */
.do3d-door {
  transform-origin: left center;              /* 铰链位置：门板左边缘 */
  transition: transform .9s cubic-bezier(.3, 1.35, .45, 1); /* 回弹曲线 */
}
.do3d-frame.open .do3d-door { transform: rotateY(-102deg); } /* 开门状态 */

JS（点击切换状态，约 10 行）：

const frame = document.getElementById('frame');
const btn = document.getElementById('btn');
const toggle = () => {
  const open = frame.classList.toggle('open');
  btn.textContent = open ? '关上门' : '打开门';
};
door.addEventListener('click', toggle);
btn.addEventListener('click', toggle);

原理拆解：transform-origin: left center 把旋转轴定在门板左缘，模拟铰链；rotateY(-102deg) 让门板绕 Y 轴向外旋开，负角度决定了开门方向（向左开）；cubic-bezier(.3, 1.35, .45, 1) 的 Y 值大于 1，产生先过冲再回落的弹性手感。门板内部再叠一层 repeating-linear-gradient 做出竖向木纹，把手与合页用纯 CSS 圆点与径向渐变完成，零图片资源。

参数说明

兼容性与性能

• 依赖 transform-origin 与 perspective，Chrome 12+ / Safari 4+ / Firefox 10+ / Edge 全支持，兼容性极好
• 动画仅 transform 一个属性参与过渡，GPU 合成，无布局与绘制开销
• 门板、把手、合页全部用 CSS 绘制，无图片请求；木纹纹理由 repeating-linear-gradient 生成，可随意换色
• 已内置键盘支持：门板可聚焦，按回车或空格同样触发开合，方便无障碍操作

常见问题

Q: 门开起来没有立体感，像被压扁了？ 检查父容器是否设置了 perspective，且该值不要过小（小于 400px 会强烈变形）。另外不要在门板或门框上设置 overflow: hidden，它会裁掉 3D 投影。

Q: 想改成向右开门怎么调？ 把 transform-origin 改为 right center，同时把 rotateY(-102deg) 改成正的 rotateY(102deg)，把手位置移到门板左侧即可。

Q: 开门后背面内容怎么处理？ 门板背面默认显示镜像内容。如果背面需要独立文案，可以给门板加一个 rotateY(180deg) 的子层做「背面面板」，与翻转卡片是同一套思路。

Q: 能商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名。