La propriété transform n'est pas utilisée uniquement pour les effets au survol, mais elle est très pratique pour cela.

Elle permet par exemple...

…de déplacer un élément sur l'axe des x:

.button {
  transition: transform 0.2s;
} 

.button:hover {
  transform: translateX(20px);
}

…de déplacer un élément sur l'axe des y:

.button {
  transition: transform 0.2s;
}

.button:hover {
  transform: translateY(-100%);
}

…de déplacer un élément sur l'axe des x et des y:

.button {
  transition: transform 0.2s;
}

.button:hover {
  transform: translate(20px, 40px);
}

...d'agrandir un élément:

.button {
  transition: transform 0.2s;
}

.button:hover {
  transform: scale(1.2);
}

...de donner une rotation à un élément:

.button {
  transition: transform 0.2s;
}

.button:hover {
  transform: rotate(45deg);
}

<aside> 📖 La liste complète des possibilité se trouve par exemple sur la documentation de Mozilla

</aside>