1. 首先先把HTML布局搭好
2. 把html和body的高度自适应，给body设置弹性盒，让后面元素能水平垂直居中
3. 写CSS
如果要把界面设置为3D，需要在ul中加一个属性transform-style，transform-style可以取两个属性值flat,表示所有子元素在2D平面呈现，preserve-3d，表示所有子元素在3D空间中呈现。animations是动画复合属性，动画名称 - 持续时间 - 过度类型- 循环次数。Transition也是一个过渡复合属性，参与过渡的属性（all代表所以）- 运动时间 - 延时时间 - 动画类型。
4. 设置每个li(图片)的位置
transform是设置元素的旋转、缩放、移动的一个属性，translate是设置其位移方向，rotate设置元素的旋转度数（deg）。
因为开始六张图片都重叠在中间一起，所以要在Z轴上进行移动，围绕移动前的中心的Y轴进行旋转，就好比教室天花板上吊着的电风扇，要围绕着中心点进行旋转。
5. 设置动画
设置动画需要用到@keyframes创建动画，当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。所以在前面ul中要设置animation属性。
@keyframes用法：
或者：
在代码中添加动画属性：
6.添加背景音乐
最后在ul的标签后面可以加一个为audio的标签，audio是定义声音的标签，比如英语或者其他音乐流，autoplay 属性设置或返回音频/视频是否在加载后立即开始播放。
最后就完成了一个音乐旋转相册。
