DOM 空间重力场

做一个单文件 HTML 作品：**DOM 空间重力场（DOM Gravity Field）**。 页面正常排版几段文字、几个按钮、几张卡片。但加入一个特殊机制：**用户用鼠标拖拽页面背景就能倾斜整个网页**（在移动设备上则用陀螺仪 / DeviceOrientation 检测倾斜）。 倾斜的瞬间，页面里所有的 DOM 元素都会受到对应方向的"**重力**"——它们会偏转、滑动、向"低处"挤压堆叠。如果倾斜得足够厉害，那些没有被钉死的元素甚至会"**掉出屏幕**"。 把"打破文档流"做成一个真的能玩的物理玩具。 可以使用外部 CDN 资源（动效库、物理库均可），但是禁止使用外部图片。 直接输出完整可运行的单文件 HTML。

做一个单文件 HTML 作品：**DOM 空间重力场（DOM Gravity Field）**。 页面初始状态是一个**普通的网页内容**——一份"正常的"信息页（如产品介绍页 / 个人简介 / 文章页），包含至少： - 1 个大标题 - 2-3 段正文段落 - 4-6 个互不相关的卡片 / 按钮 / 标签 - 1 个表单输入框 - 几个图标 / emoji 装饰 整体看起来就像一个"普通的网页"，访问页面的瞬间用户应该认为这只是一份排版页。 要求如下: ```` ### 倾斜操作 - **桌面端**：用户在页面背景按住鼠标拖拽，可以让整个页面"倾斜"（类似把一块板子提起一个角） - 拖拽方向 = 重力方向 - 拖得越远 = 重力越大 - 松开后页面缓慢回到水平 - **移动端**：自动接入 `DeviceOrientationEvent`（需要适当处理 iOS 13+ 的权限请求）。设备前后左右倾斜对应不同的重力方向 ### 物理效果 - 元素受重力作用会**沿斜面滑动 / 堆叠**——类似一堆水果掉在倾斜的桌面上 - 元素之间应当有**碰撞**——不能直接互相穿透 - 元素掉到屏幕边缘后会被"边框"挡住或**掉出屏幕**（由你设计） - 不同元素可以有不同的"质量"——按钮重一些、标签轻一些；标题可以"钉"在原位不参与物理（这给页面留一个锚点） - 重力消失（用户松开 / 设备回正）后，元素会**缓慢回到原始排版位置**（带过渡动画） ### 视觉与交互细节 - 倾斜过程中页面整体的视觉应该有**视差立体感**——可以用 `transform: rotateX/Y/Z` 让页面真的倾斜，元素受到的"重力"是相对于页面斜面的 - 物理效果的阻尼 / 弹性 / 摩擦力都要调到"看起来真"——元素不应该飘飘忽忽，也不应该硬邦邦 - 推荐使用 **Matter.js**（CDN 引入）做 2D 物理模拟，把每个 DOM 元素映射成 Matter body - 物理结束后元素的位置 / 旋转过渡到"原始位置"要平滑，不要瞬切 ### 技术约束 - 输出一个完整可运行的单文件 HTML，所有的 CSS 和 JS 内联 - 可以使用 CDN 引入物理库（例如 Matter.js）和动效库 - 禁止使用外部图片 - 简体中文界面 - 同时适配桌面和移动端，两端的"倾斜"方式不同但效果一致 ````