<section>
   <div class="default">
    
     <p>Default</p>
</div>
  <div class="translate">
    <p>TranslateX -20px, TranslateY 20px</p>
</div>
<div class="rotate">
  <p>Rotate 45 deg</p>
</div>
<div class="skew">
    <p>Skew 10deg</p>
</div>
<div class="scale">
    <p>ScaleX 0.5, ScaleY 1</p>
</div>
</section>

<section>
  <div class="real">
    <p>Hover</p>
  </div>
  <div class="real-2">
    <p>Animation</p>
  </div>
</section>
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)
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.