原本是打算测试 MiMo 最新模型的，看论坛有人说会有特调，所以没有使用鹈鹕测试，让 Codex 出了一个测试题 为啥后来没有测试 MiMo ，反而测试了 DeepSeek 呢，主要还是没有订阅😂😂 你是一名高级前端工程师。请实现一个可直接运行的单文件 `index.html`，模拟苹果官网风格的可拖拽折叠手机展示效果。
要求： 1. 只能使用原生 HTML 、CSS 、JavaScript ，不能使用 React 、Vue 、Three.js 、Canvas 、WebGL 、视频或外部依赖。 2. 手机由左右两个屏幕面板和中间转轴组成，使用 CSS 3D 实现： - 展开角度为 180°； - 半折角度为 90°； - 闭合角度为 0°； - 右侧面板必须围绕转轴旋转，而不是简单缩放或切换图片。
- 页面包含： - 一个可拖拽的 range 滑块； - “横屏”“竖屏”“闭合”“坐立”“站立”五个预设按钮； - 当前折叠角度的数值显示； - 手机屏幕中的渐变壁纸、文字和几个简单图标。 4. 支持鼠标、触摸和键盘操作： - 拖动滑块实时更新 3D 角度； - 键盘左右方向键调整角度； - Home 设置为 0°，End 设置为 180°； - 角度必须限制在 0° 到 180°。
- 正确处理 CSS 3D 的 `perspective`、`transform-origin`、`transform-style`、`backface-visibility` 和阴影，使折叠时具有真实的空间感。 6. 支持 `prefers-reduced-motion`，用户开启减少动态效果后，不应使用明显的缓动动画。
- 页面需要响应式适配桌面和移动端，不能出现横向滚动条。 8. 不要使用假的逐帧图片切换来伪造动画。
- 请先列出不超过 5 条实现假设，然后给出完整代码，最后给出至少 5 个边界测试用例，并说明每个用例的预期结果。 10. 代码必须复制到本地后直接打开即可运行。
测试结果 双方都实现了折叠交互功能 ChatGPT 5.6 Luna 最高 5.6Luna 效果 优点：耗时 7 分钟，页面 UI 强 缺点：它将折叠方向给整反了，把屏幕往后扳 DeepSeek V4 pro （额度花费 4.47 ） DeepSeek V4 pro 效果 优点：折叠方向正确 缺点：耗时长 12 分钟，UI 没有那么好看