css3滑动图片旋转,CSS3多图滚动切换

多图滚动切换

写在前面的话

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

思路

动画效果技术上严格依赖于以下几点，请大家熟练掌握，然后看下文就比较好理解了

transform 属性

animation 属性

keyframes 自定义动画规则

本文为3张图片滚动切换，每滚动一圈(360 度)有 3 个动画切换效果，0 度 -> 120 度 -> 240 度 -> 0 度；每一圈动画结束会替换首图，3 张图片都做首图总共需要 3 圈，之后整个动画完成。所以自定义动画规则中总共需要 3 * 3 = 9 个动画切换效果

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

HTML

解析

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

CSS

#container > img {

width: 100%;

height: 100%;

background-repeat: no-repeat;

background-size: contain;

}

.scroll-img {

animation: scroll 9s ease-out infinite;

}

@keyframes sc