急いでいます！

アナログ時計の画像の回転

締切済

質問者：Sn_shitumon
質問日時：2017/04/17 09:27
回答数：3件

http://www.shurey.com/js/craft/aclock/
のアナログ時計のプログラムの、画像を回転させる部分
document.getElementById("image_short").style.transform = "rotate(" + hDeg + "deg)";
この "rotate(" + hDeg + "deg)";がなぜこのような記述になるのかがわからず、困っています。
調べてもこのような記述方法はアナログ時計のプログラム以外に見つからず…

初心者ですので、わかりやすく解説いただければ幸いです。

私がわからないのは、"(" +hDeg+ " deg)"の +hDeg+の部分です…
なぜ空白？を＋しているのかがよく理解できないのです…

補足日時：2017/04/17 10:53
通報する
補足にある通り、それがCSS３を用いているところまでは調べて分かったのですが、()内の表記がなぜこのようになるのかがわかりません…そちらをお教えいただけますと幸いです。

No.1の回答に寄せられた補足コメントです。補足日時：2017/04/17 10:57
通報する
rotateが回転させるものであることは知っていますが、角度の数値を単純に入力するだけだと認識していました。変数を使用する場合のrotate"(" +hDeg+ " deg)"という書き方について解説しているページがなく、どうしてこのような書き方になるのかわからず、質問した次第です。

No.2の回答に寄せられた補足コメントです。補足日時：2017/04/17 12:23
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2017/04/17 13:38

ANo1です。

疑問点が何なのかがよく理解できていませんが・・・

例えば、id="hoge"という要素に対して、CSSで
　#hoge { transform: rotate(90deg); }
とすれば、90度回転して表示されるのはわかりますよね？

スクリプトからこれと同等の指定をするなら、
　document.getElementById("hoge").style.transform = "rotate(90deg)";
のようになります。（方法の一例です）

今回のご質問の場合は、上の90の部分を自由に指定の角度にしたいわけなので、角度に応じて、"rotate(5deg)"とか"rotate(210deg)"などといった文字列を作成する必要があります。
指定した角度が変数hDegの値となっているとすれば、
　hDeg = 5;
　"rotate(" + hDeg + "deg)"　→　"rotate(5deg)"
が得られますし、
　hDeg = 210;
　"rotate(" + hDeg + "deg)"　→　"rotate(210deg)"
を意味することになるので、回転角度を指定するのに
　"rotate(" + hDeg + "deg)"
を用いているということになります。

javascriptの文字列連結について勉強してみてください。
（特に、数値を含む場合の連結に関して）
https://www.ajaxtower.jp/js/ope/index16.html
https://developer.mozilla.org/ja/docs/Web/JavaSc …

- 0
- 件

通報する

この回答へのお礼

まさに文字連結について悩んでいました。
"rotate(hDeg + deg)"では作動せず"rotate(" + hDeg + "deg)"で作動する理由といいますか…
わかりにくい質問で申し訳ありません

通報する

お礼日時：2017/04/17 15:07

No.2

回答者： Tacosan
回答日時：2017/04/17 12:12

「空白？を＋している」とは何のことでしょうか? 特に「空白？」って何ですか?

rotate がどのような機能を持っていて, どう書いたらどうなるのかはわかりますか?

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2017/04/17 09:55

こんにちは

ご質問の部分は、CSS3のtransform rotateを利用して画像を回転させています。

単純化できるように、事前に、用いる図形の中心を全て合わせておいて、それぞれの針の示すべき時刻に対応するように、計算した角度分を図形の中心を回転中心として回転させています。

『CSS transform』あたりをキーに検索してみれば、解説はたくさん見つかると思います。
https://developer.mozilla.org/ja/docs/Web/CSS/tr …
http://htmq.com/css3/transform_rotate.shtml