ChatGPT、DeepSeek 对比测试

原本是打算测试 MiMo 最新模型的，看论坛有人说会有特调，所以没有使用鹈鹕测试，让 Codex 出了一个测试题

为啥后来没有测试 MiMo ，反而测试了 DeepSeek 呢，主要还是没有订阅😂😂

你是一名高级前端工程师。请实现一个可直接运行的单文件 `index.html`，模拟苹果官网风格的可拖拽折叠手机展示效果。

要求：

1. 只能使用原生 HTML 、CSS 、JavaScript ，不能使用 React 、Vue 、Three.js 、Canvas 、WebGL 、视频或外部依赖。
2. 手机由左右两个屏幕面板和中间转轴组成，使用 CSS 3D 实现：
   - 展开角度为 180°；
   - 半折角度为 90°；
   - 闭合角度为 0°；
   - 右侧面板必须围绕转轴旋转，而不是简单缩放或切换图片。
3. 页面包含：
   - 一个可拖拽的 range 滑块；
   - “横屏”“竖屏”“闭合”“坐立”“站立”五个预设按钮；
   - 当前折叠角度的数值显示；
   - 手机屏幕中的渐变壁纸、文字和几个简单图标。
4. 支持鼠标、触摸和键盘操作：
   - 拖动滑块实时更新 3D 角度；
   - 键盘左右方向键调整角度；
   - Home 设置为 0°，End 设置为 180°；
   - 角度必须限制在 0° 到 180°。
5. 正确处理 CSS 3D 的 `perspective`、`transform-origin`、`transform-style`、`backface-visibility` 和阴影，使折叠时具有真实的空间感。
6. 支持 `prefers-reduced-motion`，用户开启减少动态效果后，不应使用明显的缓动动画。
7. 页面需要响应式适配桌面和移动端，不能出现横向滚动条。
8. 不要使用假的逐帧图片切换来伪造动画。
9. 请先列出不超过 5 条实现假设，然后给出完整代码，最后给出至少 5 个边界测试用例，并说明每个用例的预期结果。
10. 代码必须复制到本地后直接打开即可运行。