<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square{
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #b74096;
  border-radius: 50px;
}
.square:nth-child(1){
  animation: rotate 2s infinite
}
.square:nth-child(2){
  animation: rotateX 2s infinite
}
.square:nth-child(3){
  animation: rotateY 2s infinite
}
@keyframes rotate{
  0%{
    transform: rotate(180deg);
  }
}
@keyframes rotateX{
  0%{
    transform: rotateX(180deg);
  }
}
@keyframes rotateY{
  0%{
    transform: rotateY(180deg);
  }
}