纯CSS百叶窗需三要素：父容器设transform-style: preserve-3d启用3D上下文；每个叶片加backface-visibility: hidden防镜像透出；每个叶片设transform-origin: top center确保绕顶边翻转。
直接用 CSS transform: rotateY() + transform-style: preserve-3d 就能实现，不需要 JS，但必须严格满足 3D 渲染的结构前提，否则叶片会错位、消失或翻转后内容镜像显示。
百叶窗翻转必须用 preserve-3d 启用 3D 上下文
浏览器默认把所有子元素压平到同一平面（transform-style: flat），这时哪怕你写了 rotateY(90deg)，每个“叶片”也只会原地旋转，不产生空间纵深感，更不会形成整齐的翻转轴线。只有给包裹所有叶片的父容器设 transform-style: preserve-3d，子元素才能真正拥有独立的 Z 轴位置和旋转中心。
常见错误是把这个属性加在最外层广告容器上，而实际该加在直接包着叶片的那层——比如 .blinds-wrapper，不是 .ad-banner。
- 漏掉这行，动画看起来像“抖动”或“错层”，不是整齐翻转
- 加错层级（比如加在单个
.blade上）完全无效 - IE11 及以下不支持
preserve-3d，如需兼容得降级为 translateX 滑入滑出
每个叶片必须设 backface-visibility: hidden
翻转到背面时，如果不隐藏背面，文字/图片会以镜像方式透出来，尤其当背景色浅、字体粗时特别明显。这不是 bug，是 3D 渲染的自然行为——就像你把一张纸翻过去，背面内容本就该不可见。
这个样式必须加在每个叶片元素上，不能只加在父容器。
- 没加会导致翻转中途出现“双影”或文字反向显示
- 若叶片用了
background-image，背面透出的是同一张图的镜像，极易被误判为加载失败 - 移动端 Safari 有时对
backface-visibility处理不稳定，可额外加-webkit-backface-visibility: hidden
翻转轴心靠 transform-origin 精确控制
百叶窗效果的核心是“绕顶部边缘翻起”，不是绕中心转。默认 transform-origin: 50% 50% 会让叶片像风车一样原地打转。必须显式设成 transform-origin: top center（横向百叶窗）或 transform-origin: left center（竖向百叶窗）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
注意：这个值要写在每个叶片上，且必须配合 transform-style: preserve-3d 才生效。
- 写成
top left或0 0容易让叶片翻出容器边界，留白或遮挡 - 用百分比（如
0% 0%）和关键词（top center）效果一致，但后者更易读、不易算错 - 如果广告尺寸响应式变化，
transform-origin不受影响，无需 JS 重设
hover 触发 vs JS 控制：广告场景推荐 hover
网页广告通常只需鼠标悬停即启动动效，用纯 CSS :hover 最轻量、无阻塞、兼容性好。JS 方案（如监听 mouseenter 再加 class）反而多一层依赖，还可能因广告脚本延迟加载导致动效失灵。
但要注意：iOS Safari 默认不触发 :hover，首次点击后才激活，所以广告在 iPhone 上第一次点开可能没反应——这是系统限制，无法绕过。
- 别用
click+ 内联style控制旋转，过渡节奏难统一，且移除 class 时容易残留 transform 值 - 若需自动轮播（如 Banner 广告切换），仍要用 JS 控制 class 切换，但动画本身保持 CSS 驱动
- 过渡时间建议设
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)，比默认ease更有“机械弹起”感
真正卡住人的从来不是怎么写 rotate，而是 transform-style 加在哪一层、backface-visibility 忘了加、transform-origin 没对齐顶部边缘——这三个点只要错一个，整个百叶窗就散架。动手前先数清楚 DOM 层级，再逐行核对这三处声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
