多图滚动切换

写在前面的话

之前写多图切换时有童鞋建议多写写动画效果，也想和大家多多分享的，怎奈想象力不足，一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果，感觉看起来不错，遂写下来和大家分享一下。

思路

• 动画效果技术上严格依赖于以下几点，请大家熟练掌握，然后看下文就比较好理解了
  • transform 属性
  • animation 属性
  • @keyframes 自定义动画规则
• 本文为3张图片滚动切换，每滚动一圈（360 度）有 3 个动画切换效果，0 度 -> 120 度 -> 240 度 -> 0 度；每一圈动画结束会替换首图，3 张图片都做首图总共需要 3 圈，之后整个动画完成。所以自定义动画规则中总共需要 3 * 3 = 9 个动画切换效果

首图指的是下文中 rotateY(0deg) 的动画停留效果

HTML

<div id="container">
	<img class="scroll-img" />
</div>

解析：

• html 中添加图片容器元素，容器中添加图片元素

CSS

#container {
    width: 210px;
    heig