CSS3写旋转相册

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 属性设置或返回音频/视频是否在加载后立即开始播放。

        最后就完成了一个音乐旋转相册。