.box:hover {
  transform: rotate(50deg) translateX(100px) ;
}

最後のソースにつきまして、
回転してからX方向に移動ならわかりますが、なぜ回転しながらY方向にいくのでしょう？

そもそもそういう動きは不可能という事でしょうか。