Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.exampl{
width: 100%;
height: 100px;
margin: 1%;
}
.pic1{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm1.png?raw=true) no-repeat 50% 50%;
}
.pic2{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm2.png?raw=true) no-repeat 50% 50%;
}
.pic3{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm3.png?raw=true) no-repeat 50% 50%;
}
.rightBl{
width: 100%;
height: 700px;
perspective: 1000px;
}
.bl{
float: left;
margin-left: 1%;
width: 80px;
height: 80px;
border: 1px solid black;
}
.rotPic{
animation: rotateImg 3s ease-in normal;
animation-fill-mode: forwards;
}
@keyframes rotateImg{
0%{
transform: rotateY(0deg);
transform-origin: center center;
}
100%{
transform: rotateY(5turn);
transform-origin: center center;
}
}
</style>
</head>
<body>
<div class="exampl">
<div class="bl pic1"></div>
<div class="bl pic2"></div>
<div class="bl pic3"></div>
</div>
<div class="rightBl">
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
</div>
<script type="text/javascript">
var pic = $(".rightBl .bl"),
cls = ["pic1", "pic2", "pic3"],
i = 0,
len = cls.length,
n = pic.length - 1,
anim = "rotPic";
$.each(pic.addClass(cls[i]), function(indx) {
$(this).addClass(anim).css({
"animation-delay": indx * 1.5 + "s"
}).on("webkitAnimationEnd animationend", function() {
$(this).removeClass(cls[i]).addClass(cls[(i + 1) % len]).removeClass(anim);
if (indx == n) window.setTimeout(function() {
i = ++i % len;
pic.addClass(anim)
}, 0)
})
});
</script>
</body>
</html>