GPT-6-sol 体验一下

你是一名高级前端工程师。请实现一个可直接运行的单文件 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. 代码必须复制到本地后直接打开即可运行。