0:36

transform-origin プロパティは変形後にだけ指定したいというわけではないので…

とのことで.box:hover ではなく .box の方に記述していますが、なぜ、そちらに記述するのか意味が分かりません。

変形後の方に記述しても、回転はします。

.box:hover {
    /* transform: translate(50px, 20px); */
    transform: rotate(30deg);
    transform-origin: top left;

違いがよくわかりません。
宜しくお願い致します。