時計の針状のオブジェクトを
CSSで指定する

時計の針のような形状をCSSで回転させた時不具合が起きました。
具体的には下記の様に歪んでしまいました

原因は最初に縮小変倍し、回転を最後に設定したためのようです。
回転を先に設定するとうまくいきました。
下サンプル

時計の針状形態の回転：https://labo.studio-happyvalley.com/transform/

回転の角度の単位
radとdeg

話は変わりますが、回転を指定するときの単位について。
回転を指定する場合は単位がdeg,grad,rad,turnの4つあります。
通常は角度優先のdegで指定すれば問題ないです。
90°＝ 90deg
180°= 180deg

他の単位はそれぞれ必要なケースで使います。
例えば、２点の座標の角度などを指定するときはradを使用します。
その場合Math.atan2() 関数と一緒に使うことが多いです。
Math.atan2() 関数は、Math.atan2(y, x) に対して点 (0, 0) から点 (x, y) までの半直線と、正の x 軸の間の平面上での角度 (ラジアン単位) を返します。

開発者向けのウェブ技術：Math.atan2()：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2

回転を使う場合は
必ず最初に設定

話をもどして、transformで複数設定する場合は、必ず最初に回転を設定すれば、意図通りの回転図形を得られます。

ミルクティもミルクが先か紅茶が先か何百年も論争が続いているようです。
CSSでも順番があるくらいですから、やはりどちらが先かで微妙な差はあるのではと思いますね。
ちなみに私は最初にミルク派です

開発者向けのウェブ技術：rotate()：https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/rotate