브라우저에서 자바 스크립트를 사용하여 이미지를 회전시키는 방법

JavaScript를 사용하여 아날로그 시계를 만드는 중입니다. jQuery를 사용하면 아날로그 시계를 더 쉽게 만들 수 있지만 여기서는 옵션이 아닙니다.브라우저에서 자바 스크립트를 사용하여 이미지를 회전시키는 방법

모든 것이 Chrome 및 Safari (웹킷 브라우저를 의미)에서 작동하지만 다른 브라우저에서는 작동하지 않습니다.

내 눈금 방법입니다. 기본적으로 이미지는 시간에 따라 회전합니다.

function tick(deg, elmt){ 
document.getElementById(elmt).setAttribute(
     "style", "transform:rotate(" + deg + "deg);" 
     + "-moz-transform: (" + deg + "deg);" 
     + "-o-transform: (" + deg + "deg);" 
     + "-webkit-transform:rotate(" + deg + "deg);" 
     + "filter:progid:DXImageTransform.Microsoft.BasicImage(" + deg + "deg);" 
    ); 
}

어떤 제안을하면 효과가 있습니까?

출처

2011-11-24 vinc386

모든 이유는 당신이 jQuery를 사용하지 않는 수행하는 방법에 대한 http://www.boogdesign.com/examples/transforms/matrix-calculator.html의 소스를 보면? jQuery가없는 JavaScript는 표준 라이브러리가없는 C와 유사합니다. –

@ MaximYegorushkin : DOM API가없는 Javascript는 표준 라이브러리가없는 C와 유사합니다. C에서 임베디드 프로그래밍을위한 Arduino 라이브러리를 제외하고는 C에서 jQuery에 대한 일반적인 아날로그가 있다고 생각하지 않습니다. – slebetman

@slebetman : Boost가없는 C++과 비슷합니다. –

당신은

가 코드를 변경된

function tick(deg, elmt){ 
document.getElementById(elmt).setAttribute(
     "style", "transform:rotate(" + deg + "deg);" 
     + "-moz-transform: rotate(" + deg + "deg);" 
     + "-o-transform: rotate(" + deg + "deg);" 
     + "-webkit-transform:rotate(" + deg + "deg);" 
     + "-ms-transform:rotate("+ deg +"deg);" 
    ); 
}

데모 http://jsfiddle.net/gaby/fjHHX/3/

업데이트에서 IE 구문에 -moz- 및 -o- 속성에 대한 rotate의 rotation를 사용하지 않은 IE9지원 783,확장 및 매트릭스 변환을 이용할 수 IE 버전 (8)의 지원을하고 아래 filter 임의의 회전을 허용하지 않는 한 (만 0도, 90도, 180도, 270도) ..

제거하지만 가져 못생긴 .. http://css3please.com/
에서 섹션 .box_rotate보고하거나

출처

2011-11-24 09:49:49

IE의 회전 필터는 임의의 각도를 허용하지 않으며 90 도의 배수만 허용 http://msdn.microsoft.com/en-us/library/bb554293%28v=vs.85%29.aspx – user123444555621

@Pumbaa, 좋은 지적 .. –

@ GabyakaG.Petrioli IE8 이하를 제외한 대부분의 브라우저에서 작동합니다. 다음과 같이 표시됩니다. http://cl.ly/CAis (스크린 샷) 손이 "엇갈 리다" – vinc386

브라우저에서 자바 스크립트를 사용하여 이미지를 회전시키는 방법

답변

관련 문제