在开始前先了解下css的动画和3d旋转的属性。

css的动画属性

1.transition: 过渡
特点：需要事件进行触发。

2.animation：动画
特点：不需要事件进行触发。调用关键帧即可

它的属性值：

• animation-name：关键帧的名称
• animation-duration：动画的持续的时间
• animation-delay：动画的延迟
• animation-iteration-count：动画运动的次数（默认情况下运动1次） infinite(无限循环)
• animation-direction：运动的方向
• animation-timing-function：动画的类型
  linear（匀速）
  ease
  ease-in
  step-start （没有动画中间的过渡效果。每次直接跳到下一帧开始的地方）

常用的写法：animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间

制定关键帧：
@keyframes 关键帧的名称{
制定关键帧：
from{}
to{}
或
0%{
//开始状态
}
到
100%{
//结束状态
}
}

3D的旋转属性

transform:rotate();
rotateX()
rotateY()
rotateZ() //默认情况效果类似
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

下面我们就用3d旋转和动画的效果做一个旋转的相册
首先是立方体：我们要创建一个大盒子里包着多个小盒子并导入图片，然后给盒子加上样式，再加上旋转和动画。下面是代码和效果：
首先是盒子代码

然后是css样式：

最后是效果图：

以上就是如何用CSS动画和3D旋转实现旋转的相册全过程，照片都是百度上下载的，希望大家喜欢。