html - why isnt my animation rotating fully? -

hi i'm using @webkit in css animate shapes have, want shapes rotate original position around centre, tried rotating shapes around z axis. wrote script thought worked turns out first shape moves first position (all shapes transform different position before returning original place) replays animation again, loop of first position only. how change script able rotate fully.

#catogories-1 {    width: 133px;    position:fixed;    left: 50%;    right: 50%;    top: 45%;    z-index: 6;    -webkit-animation: catogories-1 1.5s linear infinite;  }    #catogories-2 {    width: 133px;    position:fixed;    left: 55%;    right: 45%;    top: 37%;    z-index: 4;    -webkit-animation: catogories-2 1.5s linear infinite;  }    #catogories-3 {    width: 133px;    position:fixed;    left: 45%;    right: 55%;    top: 34%;    z-index: 3;    -webkit-animation: catogories-3 1.5s linear infinite;  }        #catogories-4 {    width: 133px;    position:fixed;    left: 35%;    right: 65%;    top: 37%;    z-index: 4;    -webkit-animation: catogories-4 1.5s linear infinite;  }    #catogories-5 {    width: 133px;    position:fixed;    left: 40%;    right: 60%;    top: 46%;    z-index: 5;    -webkit-animation: catogories-5 1.5s linear infinite;  }        @-webkit-keyframes catogories-1 {    {width: 133px;      position:fixed;      left: 50%;      right: 50%;      top: 45%;      z-index: 6;}    {width: 133px;      position:fixed;      left: 55%;      right: 45%;      top: 37%;      z-index: 4;    }  }            @keyframes catogories-1 {    {width: 133px;      position:fixed;      left: 50%;      right: 50%;      top: 45%;      z-index: 6;}    {width: 133px;      position:fixed;      left: 55%;      right: 45%;      top: 37%;      z-index: 4;}  }    @-webkit-keyframes catogories-2 {    {width: 133px;      position:fixed;      left: 55%;      right: 45%;      top: 37%;      z-index: 4;}    {width: 133px;      position:fixed;      left: 45%;      right: 55%;      top: 34%;      z-index: 3;}  }    @keyframes catogories-2 {    {width: 133px;      position:fixed;      left: 55%;      right: 45%;      top: 37%;      z-index: 4;}    {width: 133px;      position:fixed;      left: 45%;      right: 55%;      top: 34%;      z-index: 3;}  }    @-webkit-keyframes catogories-3 {    {width: 133px;      position:fixed;      left: 45%;      right: 55%;      top: 34%;      z-index: 3;}    {width: 133px;      position:fixed;      left: 35%;      right: 65%;      top: 37%;      z-index: 4;}  }    @keyframes catogories-3 {    {width: 133px;      position:fixed;      left: 45%;      right: 55%;      top: 34%;      z-index: 3;}    {width: 133px;      position:fixed;      left: 35%;      right: 65%;      top: 37%;      z-index: 4;}  }    @-webkit-keyframes catogories-4 {    {width: 133px;      position:fixed;      left: 35%;      right: 65%;      top: 37%;      z-index: 4;}    { width: 133px;      position:fixed;      left: 40%;      right: 60%;      top: 46%;      z-index: 5;}  }    @keyframes catogories-4 {    {width: 133px;      position:fixed;      left: 35%;      right: 65%;      top: 37%;      z-index: 4;}    { width: 133px;      position:fixed;      left: 40%;      right: 60%;      top: 46%;      z-index: 5;}  }    @-webkit-keyframes catogories-5 {    {width: 133px;      position:fixed;      left: 40%;      right: 60%;      top: 46%;      z-index: 5;}    {width: 133px;      position:fixed;      left: 50%;      right: 50%;      top: 45%;      z-index: 6;}  }    @keyframes catogories-5 {    {width: 133px;      position:fixed;      left: 40%;      right: 60%;      top: 46%;      z-index: 5;}    {width: 133px;      position:fixed;      left: 50%;      right: 50%;      top: 45%;      z-index: 1.5;}  }

<div class="catogories">      <div id="catogories-1">        <img src="images/rectangle-1.png">          </div>      <div id="catogories-2">        <img src="images/rectangle-1-copy.png">        </div>      <div id="catogories-3">        <img src="images/rectangle-1-copy-2.png">          </div>      <div id="catogories-4">        <img src="images/rectangle-1-copy-3.png">          </div>      <div id="catogories-5">        <img src="images/rectangle-1-copy-4.png">        </div>  </div>

your current animation moves images in straigt line more or less follows part of ellipse. trying make full circular movement?

i've been experimenting once pure css ferris wheel. although never finished it, may have see how circular animation done:

http://jsfiddle.net/goleztrol/u9d8aha3/1/

the key in animation, looks like:

@keyframes spin { 100% { -transform: rotate(360deg); } } 

in other words, use rotate animation element. if rotate wrapper, in rotate it. can rotate items in other direction, stay upright:

.wrapper {    margin: 0 auto;    position: relative;    top: 50px;        width: 200px;    height: 200px;    border: 1px solid blue;  }    .item {    width: 20px;    height: 20px;    border: 1px solid red;  }    /* both wrapper , item have same animation */  .wrapper,  .item  {    -webkit-animation:spin 20s linear infinite;    -moz-animation:spin 20s linear infinite;    animation:spin 20s linear infinite;  }    /* item animation reversed compared wrapper, stays      upright. in case, direction of wrapper reversed,      turns counter-clockwise. item rotates in normal, clockwise      direction. */  .wrapper {    -webkit-animation-direction: reverse; /* chrome, safari, opera */    animation-direction: reverse;  }    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div class="wrapper">    <div class="item">      x    </div>      </div>