实现Nano Banana风格悬浮书页需五步：一、构建3D容器与书页结构并设perspective和preserve-3d；二、为5页设不同translateZ与rotateX/Y值营造深度倾斜；三、用mousemove+requestAnimationFrame实现鼠标跟随旋转；四、叠加Canvas粒子背景与soft-light径向渐变遮罩；五、启用will-change、translateZ(0)等硬件加速优化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望在网页中实现悬浮书页的视觉效果，Nano Banana风格的梦幻场景通常依赖于CSS 3D变换、层级堆叠与动态偏移组合。以下是拆解并重组该特效的具体操作路径：
一、构建基础书页结构与3D容器
悬浮书页的核心在于创建一个具备透视能力的容器，并在其内部定义多个独立书页元素，每个书页需设置transform-style: preserve-3d以维持子元素的3D空间关系。
1、在HTML中创建一个class为“book-container”的div作为3D父容器。
2、在该容器内嵌入5个div，分别添加class="page"并设置data-index属性值为1至5。
3、为.book-container添加CSS样式：perspective: 1200px；transform-style: preserve-3d；height: 100vh；width: 100vw；overflow: hidden。
4、为.page添加基础样式：position: absolute；top: 50%；left: 50%；width: 320px；height: 420px；margin: -210px 0 0 -160px；backface-visibility: hidden；transform-style: preserve-3d。
二、应用逐层Z轴偏移与微旋转
通过为每张书页赋予不同的translateZ与rotateX/rotateY值，可模拟纸张自然悬浮时的深度错落与轻微倾斜感，这是Nano Banana风格中“梦幻感”的关键来源。
1、为第一页（data-index="1"）设置transform: translateZ(80px) rotateX(-1.2deg) rotateY(0.8deg)；
2、为第二页（data-index="2"）设置transform: translateZ(40px) rotateX(-0.7deg) rotateY(-0.3deg)；
3、为第三页（data-index="3"）设置transform: translateZ(0) rotateX(0) rotateY(0)；
4、为第四页（data-index="4"）设置transform: translateZ(-30px) rotateX(0.5deg) rotateY(0.6deg)；
5、为第五页（data-index="5"）设置transform: translateZ(-70px) rotateX(1.0deg) rotateY(-0.9deg)；
三、注入动态交互响应
使用鼠标移动事件实时计算偏移量，并将其映射为书页的rotateX与rotateY增量，可触发轻盈跟随效果，增强沉浸式体验。
1、为document添加mousemove事件监听器，捕获e.clientX和e.clientY值。
2、计算归一化偏移：const x = (e.clientX / window.innerWidth - 0.5) * 20；const y = (e.clientY / window.innerHeight - 0.5) * 20；
3、遍历所有.page元素，对每个元素执行：element.style.transform = `translateZ(${zValue}px) rotateX(${-y * 0.3}deg) rotateY(${x * 0.3}deg)`；
4、为提升性能，使用requestAnimationFrame包裹变换逻辑，并添加throttle限制执行频率。
四、叠加粒子背景与柔光遮罩
在书页层下方插入Canvas粒子系统，并在其上方覆盖半透明白色径向渐变遮罩，可强化“悬浮于梦境”的氛围层次，这是Nano Banana视觉语言的重要组成部分。
1、在.book-container下方插入，并设置position: absolute；z-index: -1；top: 0；left: 0；width: 100%；height: 100%；
2、使用JavaScript初始化粒子系统，粒子color设为#e6f7ff，size范围0.5–2.5，运动速度衰减系数设为0.92。
3、在.book-container上方添加
，其CSS包含background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%)；mix-blend-mode: soft-light；pointer-events: none；4、为.glow-mask设置z-index: 10；position: absolute；top: 0；left: 0；width: 100%；height: 100%；
五、启用硬件加速与性能优化
强制GPU渲染可避免悬浮动画卡顿，尤其在低端设备上保障书页旋转与位移的流畅性，同时防止页面重排引发的布局抖动。
1、为所有.page元素添加will-change: transform；
2、为.book-container添加transform: translateZ(0)；
3、禁用书页元素的outline与box-shadow（除非用于特定发光效果）；
4、将所有动画相关CSS属性统一写入class而非内联style，确保浏览器可进行样式复用与图层合并；
