도 변수로 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)"; 

ID 초 (현재 초 * 6)로 이미지를 회전하려고합니다. 하지만 css rotate는 rotate (40deg)와 같이 일정한 각도로만 움직일 수 있습니다. 내가 할 경우 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 값인 s이 값인 경우 120deg을 수신하게됩니다. 위의 한 줄을 console.log 전화에서 사용하는 것과 같은 개념입니다.

Answer 2

당신이 당신의 마지막 문을 교체해야

, 대신 정도의 값의 문자열을 전달하고 있기 때문에

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

.

희망이 도움이됩니다.