span{
  display:inline-block;
  width:100px;
  height:100px;
  margin:50px;
}
.circle1{
  border-radius:100%;
  box-sizing:border-box;
  border:10px dotted gold;
  animation:3s linear infinite rotation;

}
.circle2{
  width:70px;
  height:70px;
  border-radius:100%;
  background:limegreen;
  transform-origin:right center;
  animation:2s ease infinite alternate rotation;
}
.circle3{
  border-radius:50%;
  background:gold;
  animation:.5s ease-in-out infinite alternate rotationx;
}

.box1{
  background:orange;
  animation:3s ease-in-out infinite alternate rotation;
}
.box2{
  background:skyblue;
  position:relative;
  animation:3s ease-in-out infinite alternate rotationy, 3s linear infinite alternate movement;
}
.box3{
  border-left:3px solid gray;
  transform-origin:left top;
  animation:3s ease-in-out infinite rotation;
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotationx{
  0%{ transform:rotateX(0);}
  50%{ background:tomato; }
  100%{ transform:rotateX(360deg); }
}
@keyframes rotationy{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}
@keyframes movement{
  0%{ left:-100px;}
  100%{ left:100px; }
}