JavaScript를 사용하여 스타일 -webkit-transform을 동적으로 설정하는 방법은 무엇입니까?

-webkit-transform: rotate()JavaScript를 사용 하여 속성을 동적으로 변경하고 싶지만 일반적으로 사용되는 속성 setAttribute이 작동하지 않습니다.

img.setAttribute('-webkit-transform', 'rotate(60deg)');

는 .style하나 작동하지 않습니다 ...

JavaScript에서 어떻게 동적으로 설정할 수 있습니까?

JavaScript 스타일 이름은 다음 WebkitTransformOrigin과 같습니다.WebkitTransform

element.style.webkitTransform = "rotate(-2deg)";

여기 에서 WebKit에 대한 DOM 확장 참조를 확인 하십시오 .

다음은 대부분의 일반 공급 업체에 대한 JavaScript 표기법입니다.

webkitProperty
MozProperty
msProperty
OProperty
property

다음과 같은 인라인 변환 스타일을 재설정합니다.

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

그리고 jQuery를 사용하여 이렇게 :

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

블로그 게시물 JavaScript로 공급 업체 접두사 코딩 (2012-03-21)을 참조하십시오 .

사용해보십시오

img.style.webkitTransform = "rotate(60deg)"

이를 통해 수행 setAttribute하려면 다음 style과 같이 속성을 변경하십시오 .

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

다른 모든 인라인 스타일을 재설정하고 필요한 스타일 속성의 값만 다시 설정하려는 경우 유용하지만 대부분의 경우 원하지 않을 수 있습니다. 그래서 모두가 이것을 사용하도록 조언했습니다.

element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';

위의 내용은

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';

3D 개체에 애니메이션을 적용하려면 다음 코드를 사용하십시오.

<script>

$(document).ready(function(){

    var x = 100;
    var y = 0;
setInterval(function(){
    x += 1;
    y += 1;
    var element = document.getElementById('cube');
    element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
    element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
},50);
//for other browsers use:   "msTransform",    "OTransform",    "transform"

});

</script>