transform-originがhover時に適用されない。

Question

前提・実現したいこと

cssのtransform-originプロパティの動きを確認するため、
要素にhover時transform-originの指定により要素の回転が異なることを確認しようとした。

発生している問題・エラーメッセージ

transform-originを指定しても、最初にhover時回転挙動が変化しない(要素の中心を原点として回転する)。
ただし、最初のhover時の回転挙動が完了した後に対象要素からカーソルを外すと、transform-originで指定した原点で回転するようになる。

該当のソースコード

<div class="to1">top left</div>
<div class="to2">center center</div>
<div class="to3">bottom right</div>

div{
  display: block;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  background: rgba(0, 100, 100, 0.8);
  transition: all 1s ease;
}

.to1:hover { transform: rotate(360deg); transform-origin: top left;}
.to2:hover { transform: rotate(360deg); transform-origin: center center;}  //default
.to3:hover { transform: rotate(360deg); transform-origin: bottom right;}

試したこと

相対位置や絶対位置、位置指定(top centerなど)で試してみましたが特に変化がありませんでした。
hover時などでは適用されないとかそういったルールがあるのでしょうか。。。？

補足情報（FW/ツールのバージョンなど）

対象ブラウザはchromeのみで一旦みています。
クロスブラウザ対応はいらないです。

Answer 1

自己解決しました。
cssの指定方法が間違っていました。
transform-originは擬似要素hoverで指定するのではなく、対象要素にそのまま指定すればよいみたいでした。

// 間違い
.to1:hover { transform: rotate(360deg); transform-origin: top left;}
.to2:hover { transform: rotate(360deg); transform-origin: center center;}  //default
.to3:hover { transform: rotate(360deg); transform-origin: bottom right;}

// 正しい
.to1 { transform-origin: top left;}
.to2 { transform-origin: center center;}  //default
.to3 { transform-origin: bottom right;}

.to1:hover, .to2:hover, .to3:hover { transform: rotate(360deg);}