Raketa,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">[id*="btn"]{
width:104px;
height:101px;
background:url(http://javascript.ru/forum/images/smilies/smile.gif) no-repeat center center;
background-size: cover;
}
.active{
-moz-animation:deg 3s linear;
-o-animation:deg 3s linear;
animation:deg 3s linear;
-webkit-animation:deg 3s linear;
}
@-webkit-keyframes deg{
0%{
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}
50%{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
100%{
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
}
}
@keyframes deg{
0%{
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}
50%{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
100%{
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="btn-1"></div>
<div id="btn-2"></div>
<div id="btn-3"></div>
</div>
<script>
var d = document.querySelectorAll('[id*="btn"]'), len = d.length, n = len-1;
function go() {
d[n].classList.remove('active');
n = ++n % len;
d[n].classList.add('active');
}
var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}
[].forEach.call(d, function(elem, i) {
PrefixedEvent(elem,'AnimationEnd',go)
});
go()
</script>
</body>
</html>