Пример анимации на CSS очень прикольно! 🙂
.uwloader{
background: url(http://my-opinions.info/wp-content/uploads/2014/09/preloader.png) no-repeat;
background-size: 80px 80px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -30px;
margin-top: -30px;
width: 80px;
height: 80px;
-webkit-animation: rotateplane 2s infinite ease-in-out;
animation: rotateplane 2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
25% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
50% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
}
75% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg)
}
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
25% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
75% {
transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
}
}