CSSスタイルの画像を回転させるには度の変数を使用しますか？

Question

var today = new Date(); 
var h = today.getHours(); 
var m = today.getMinutes(); 
var s = today.getSeconds(); 
console.log("hour"+h+"min"+m+"sec"+s); 

document.getElementById("sec").style.transform = "rotate((s*6)deg)"; 

（現在の秒* 6）度でID秒の画像を回転しようとしています。しかし、CSSの回転は回転（40度）のように一定の程度しか取れないようです。 もし私が var x =40; rotate('x'deg); またはそのような何かが動作しないようなもの。

変数を使用して回転させる方法を教えてください。

Answer 1

rotate((s*6)deg)（結果ではなく、S * 6という文字列）の文字列を変換スタイルに指定しています。結果を文字列に連結するように文字列を分割する必要があります。これは、文字列に変数s回6の値を渡します

ar today = new Date(); 
var h = today.getHours(); 
var m = today.getMinutes(); 
var s = today.getSeconds(); 
console.log("hour"+h+"min"+m+"sec"+s); 

document.getElementById("sec").style.transform = "rotate(" + (s*6) + "deg)"; 

：

はこれを使用してください。したがって、CSSパーサーは、リテラル文字列s*6degの意味を問わず、有効なCSS値である120deg（変数sが値20だった場合）を代わりに受信します。上記の1行をconsole.logで使用したのと同じコンセプトです。

Answer 2

あなたは、文字列の代わり程度の値を渡しているので、あなたは

document.getElementById("sec").style.transform = "rotate(("+s*6+")deg)"; 

、とあなたの最後の文を交換する必要があります。

これが役に立ちます。