单纯rotate()不够用，因万花筒需镜像复制+径向裁切；须用多元素/伪元素实现对称单元，配合clip-path裁切视窗或repeating-conic-gradient模拟色轮。
直接用 transform: rotate() 配合 @keyframes 就能做出基础万花筒旋转效果，但真要“像万花筒”——得靠重复对称 + 径向裁切，纯 CSS 实现有硬限制，别指望它能动态生成任意分形图案。
为什么单纯 rotate() 不够用
万花筒的视觉核心是：1 个原始图形，被镜像复制成 6 或 8 份，围成一圈，再整体旋转。CSS 的 rotate() 只动角度，不自动复制、不自动对称翻转。你看到的“旋转动画”如果只是单个元素自转，那只是风车，不是万花筒。
常见错误现象：animation: spin 4s linear infinite; 写了，但页面只有一块色块在转，毫无分形感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用多个
<div>元素（或伪元素::before/::after）手动拼出至少 3 个以上对称单元 - 每个单元需单独设置
transform: rotate(60deg) scaleX(-1);这类组合变换来模拟镜像+定位 - 所有单元要包裹在同一个
overflow: hidden;容器里，否则镜像部分会溢出
clip-path 是实现“镜面边界”的关键
万花筒的三角形/六边形视窗不是装饰，是强制裁切区域。没有它，对称图形会铺满整个容器，失去“窥视感”。clip-path: polygon(...) 能精准框定可视范围，且支持动画（虽然性能略低）。
使用场景：当你要模拟手持万花筒的狭长视角，或想让旋转中心保持稳定时，clip-path 比 overflow: hidden 更可控。
参数差异：
-
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);→ 菱形窗口 -
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);→ 五边形（更接近传统万花筒截面） - 注意：Safari 对
clip-path的polygon()支持较好，但旧版 Chrome 需加-webkit-clip-path
用 repeating-conic-gradient 省掉 DOM 复制
如果你只要颜色轮转效果（比如背景动画），不用真实图形镜像，repeating-conic-gradient 是最轻量解法。它本质是 CSS 生成的“假镜面”，靠色 stops 的周期性重复模拟万花筒的放射对称。
示例代码：
background: repeating-conic-gradient(
#ff6b6b, #4ecdc4 20%,
#ffe66d 40%, #1a535c 60%
);
animation: rotate 8s linear infinite;
@keyframes rotate {
from { background-position: 0 0; }
to { background-position: 360deg 0; }
}
性能影响：比 DOM 多节点方案节省渲染压力，但无法承载复杂 SVG 图形；兼容性上，Firefox 71+、Chrome 85+、Safari 15.4+ 支持，IE 完全不支持。
真正难的不是旋转，是让每一块“镜像”严丝合缝地接在一起——像素级偏移、小数角度累积误差、不同浏览器对 transform-origin 的解析偏差，都会让本该闭合的环出现缝隙。动手前先在 CodePen 里用 border: 1px solid red 套住每个单元，肉眼校验对齐。
