为什么我的动画不能完全旋转？

Question

您好我在css中使用@webkit为我拥有的形状设置动画，我希望所有形状完全旋转到它们围绕中心的原始位置，我尝试围绕z轴旋转形状。我写了一个我认为有效的脚本，但事实证明第一个形状移动到第一个位置（所有形状将在返回原始位置之前转换到不同的位置）然后再次重放动画，所以他们只是第一个位置的循环。如何更改脚本以便能够完全旋转。

#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 {
  from {width: 133px;
    position:fixed;
    left: 50%;
    right: 50%;
    top: 45%;
    z-index: 6;}
  to {width: 133px;
    position:fixed;
    left: 55%;
    right: 45%;
    top: 37%;
    z-index: 4;
  }
}





@keyframes catogories-1 {
  from {width: 133px;
    position:fixed;
    left: 50%;
    right: 50%;
    top: 45%;
    z-index: 6;}
  to {width: 133px;
    position:fixed;
    left: 55%;
    right: 45%;
    top: 37%;
    z-index: 4;}
}

@-webkit-keyframes catogories-2 {
  from {width: 133px;
    position:fixed;
    left: 55%;
    right: 45%;
    top: 37%;
    z-index: 4;}
  to {width: 133px;
    position:fixed;
    left: 45%;
    right: 55%;
    top: 34%;
    z-index: 3;}
}

@keyframes catogories-2 {
  from {width: 133px;
    position:fixed;
    left: 55%;
    right: 45%;
    top: 37%;
    z-index: 4;}
  to {width: 133px;
    position:fixed;
    left: 45%;
    right: 55%;
    top: 34%;
    z-index: 3;}
}

@-webkit-keyframes catogories-3 {
  from {width: 133px;
    position:fixed;
    left: 45%;
    right: 55%;
    top: 34%;
    z-index: 3;}
  to {width: 133px;
    position:fixed;
    left: 35%;
    right: 65%;
    top: 37%;
    z-index: 4;}
}

@keyframes catogories-3 {
  from {width: 133px;
    position:fixed;
    left: 45%;
    right: 55%;
    top: 34%;
    z-index: 3;}
  to {width: 133px;
    position:fixed;
    left: 35%;
    right: 65%;
    top: 37%;
    z-index: 4;}
}

@-webkit-keyframes catogories-4 {
  from {width: 133px;
    position:fixed;
    left: 35%;
    right: 65%;
    top: 37%;
    z-index: 4;}
  to { width: 133px;
    position:fixed;
    left: 40%;
    right: 60%;
    top: 46%;
    z-index: 5;}
}

@keyframes catogories-4 {
  from {width: 133px;
    position:fixed;
    left: 35%;
    right: 65%;
    top: 37%;
    z-index: 4;}
  to { width: 133px;
    position:fixed;
    left: 40%;
    right: 60%;
    top: 46%;
    z-index: 5;}
}

@-webkit-keyframes catogories-5 {
  from {width: 133px;
    position:fixed;
    left: 40%;
    right: 60%;
    top: 46%;
    z-index: 5;}
  to {width: 133px;
    position:fixed;
    left: 50%;
    right: 50%;
    top: 45%;
    z-index: 6;}
}

@keyframes catogories-5 {
  from {width: 133px;
    position:fixed;
    left: 40%;
    right: 60%;
    top: 46%;
    z-index: 5;}
  to {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>

Answer 1

您当前的动画将图像移动到或多或少跟随椭圆的一部分的straigt线。你想尝试完整的圆周运动吗？

我一直用纯CSS摩天轮试验过一次。虽然我从未完成它，但您可以查看圆形动画是如何完成的：

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

键位于动画中，如下所示：

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

换句话说，为元素使用旋转动画。如果旋转包装器，其中的所有内容都将随之旋转。但是你可以在另一个方向旋转物品，这样它们就会保持直立状态：

＆＃13;

＆＃13;

.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 the wrapper and the item have the same animation */
.wrapper,
.item
{
  -webkit-animation:spin 20s linear infinite;
  -moz-animation:spin 20s linear infinite;
  animation:spin 20s linear infinite;
}

/* But the item animation is reversed compared to the wrapper, so it stays 
   upright. In this case, the direction of the wrapper is reversed, so it 
   turns counter-clockwise. The item rotates in its 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); } }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;