読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

【CSS3】rotate(プラスの角度)とrotate(マイナスの角度)

CSS CSS3

chuckです。

いまフロントエンドのコーディングをしていて気づいたことがあったのでメモ。と言ってもすごく単純なことですがw

 

css3でtransform : rotateを指定する時、角度も指定できるじゃないですか。こんな感じで。

f:id:chuck0523:20150928223358p:plain

 

今までは値の正負を気にしていなかったんですが、今日初めて気にしたのでメモ。

 

 

角度を増やすと時計回り

僕はjQueryを使って、動的に要素を回すのが好きです。そこでいつも気になるのが、角度をインクリメントするべきか、デクリメントするべきかということ。

結論から言うと、インクリメントは時計回りです。

 

実際に見た方が早いかと思われます。

 

DEMO

まずこちら。いま画面には2枚の面が重なっています。

f:id:chuck0523:20150928224058p:plain

 

このうちの手前の面を10度回転させます。すると、

f:id:chuck0523:20150928224155p:plain

時計回りにズレまず。

 

角度を30度にすると、

f:id:chuck0523:20150928224222p:plain

さらにズレます。

 

一方で、角度をマイナスにすると反時計回りにズレます。

f:id:chuck0523:20150928224256p:plain

こちらがマイナス10度。

 

f:id:chuck0523:20150928224312p:plain

そしてこちらがマイナス30度。

 

※わかりやすいように、回転の軸は通常とずらしてあります。(画面の上部中央)rotate-origin: 50% 0;

 

DEMOおわり。

 

僕がいま作っているものは、インクリメントが必要でした。面を右から左へ登場させたいので。

普段はあまり意識しませんが、回転の方向をしっかりと指定したい時は重要になってくるのではないかなと思いました。

 

単純な話でしたが、自分用にメモ。