section {
  display:flex;
  flex-direction:row;
  justify-content:center;
}
div {
  width:100px;
  height:100px;
  border:1px solid #eee;
  background-color:#eee;
  margin:20px;
}
p {
  padding:25% 25%;
}
.translate {
  transform: translate(-20px, 20px)
}
.rotate {
  transform: rotate(45deg)
}
.skew {
  transform:skew(10deg)
}
.scale {
  transform: scale(0.5,1)
}
.real, .real-2 {
  text-align:center;
  align-self:center;
  border-radius: 999px;
  transition: transform 0.5s ease;
}
.real:hover {
  transform: translate(-20px, 0) rotate(360deg)
}
.real-2 {
  animation: mymove 5s linear infinite;
}
@keyframes mymove {
  0 {
    transform: translate(0)
  }
  50% {
    transform: translateX(50px) rotate(180deg)
  }
  100% {
    transform: translate(0) rotate(360deg)
  }
}