chuckです。
いまフロントエンドのコーディングをしていて気づいたことがあったのでメモ。と言ってもすごく単純なことですがｗ
css3でtransform : rotateを指定する時、角度も指定できるじゃないですか。こんな感じで。
今までは値の正負を気にしていなかったんですが、今日初めて気にしたのでメモ。
角度を増やすと時計回り
僕はjQueryを使って、動的に要素を回すのが好きです。そこでいつも気になるのが、角度をインクリメントするべきか、デクリメントするべきかということ。
結論から言うと、インクリメントは時計回りです。
実際に見た方が早いかと思われます。
DEMO
まずこちら。いま画面には２枚の面が重なっています。
このうちの手前の面を10度回転させます。すると、
時計回りにズレまず。
角度を30度にすると、
さらにズレます。
一方で、角度をマイナスにすると反時計回りにズレます。
こちらがマイナス10度。
そしてこちらがマイナス30度。
※わかりやすいように、回転の軸は通常とずらしてあります。（画面の上部中央）rotate-origin: 50% 0;
DEMOおわり。
僕がいま作っているものは、インクリメントが必要でした。面を右から左へ登場させたいので。
普段はあまり意識しませんが、回転の方向をしっかりと指定したい時は重要になってくるのではないかなと思いました。
単純な話でしたが、自分用にメモ。