Записи участника (chila) (Форум аццкого кодера)

<div class="orbit">
   <div class="path"><img class="electron" src=".../star.png"></img></div>
  </div>

.orbit {
width:300px;
height:250px;
position: relative;
top: -30px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(70deg) rotateY(180deg);
}
   
                          
.path {
width:300px;
height:280px;
position: absolute;
-webkit-animation-name: pathRotate;
-webkit-transform-style: preserve-3d;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

                         
.electron {
position: absolute;
width:30px;
-webkit-animation-name: electronFix;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes pathRotate {
0% { -webkit-transform: rotateZ(0deg);}
100% { -webkit-transform: rotateZ(-360deg); }
}    
                    
@-webkit-keyframes electronFix{
0% {-webkit-transform: rotateX(90deg) rotateY(0deg) scale(0.5); }
25%  {-webkit-transform: rotateX(90deg) rotateY(90deg) scale(0.7); }
50%  {-webkit-transform: rotateX(90deg) rotateY(180deg) scale(1); }
75%  {-webkit-transform: rotateX(90deg) rotateY(270deg) scale(1); }
100% {-webkit-transform: rotateX(90deg) rotateY(360deg) scale(0.5);}
}