三维动画

重点：

transform-style: preserve-3d;
perspective: 500px;
transform: translate() rotate();

重点：

文件夹整体上传图片
数据组件循环生成6个面
动态类名、动态img src
display: grid;
grid-template-columns: repeat(3, auto);

重点：

六棱柱的上下表面六边形是由3个长方形重叠合成的
6个侧面共同组成360度，则每个面旋转60度
transform是有顺序的，顺序不同最终效果也可能不同

重点：

其实就是六面体拉开距离后的6个侧面
每点击一下按钮就旋转60度
爷爷设置perspective、父亲设置transform-style: preserve-3d、孩子们设置绝对定位和3D偏移

重点：

四块箱子盖要绕着各自相邻边旋转，需要通过transform-origin来定位变换原点
:hover后的样式不方便观察，设计的时候可以先通过添加一个类名，设计完成后去掉此类名再换成伪类

重点：

旋转以观察隐藏在《不可能楼梯》中的秘密
球体是由多个圆形（ball-layer）分别倾斜一定角度重叠而成的

繁琐点：
每个圆柱体的高度不同，需要依次调整到合适的位置
球体沿着圆柱体顶部往下滚动的动画需要根据每个圆柱体的高度设定不同的位移和到达此圆柱体的时间

重点：

认知复杂物体最好的办法是对它进行拆解：去动画，去变形，去非关注物件。