Studio
Happyvalley

ミルクティーと
Transform Rotateは
順番が肝心

Transform回転と縮小を
同時に指定すると
歪んじゃった

image: ミルクティーとTransform Rotateは順番が肝心
Method with Transform Rotate

CSSのTransform rotate(回転)とscale(変倍)を
同時に指定すると思ったようにならない

2023/01/16

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/fig1-1.jpg

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

https://studio-happyvalley.com/wp/wp-content/uploads/fig2-1.jpg

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

回転の角度の単位
radとdeg

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

他の単位はそれぞれ必要なケースで使います。
例えば、2点の座標の角度などを指定するときは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

ミルクティーの順番はどっちでもいいけど CSSの回転は一番最初に設定

『ミルクティーとTransform Rotateは順番が肝心』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら