div에 추가 변환을 추가 할 수 있습니까?

Question

그래서 이미 div가 transfrom을 가지고 있다면, 기존의 rotate에 추가 할 수 있습니까? 이 같은 뭔가 :

<div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv"></div> 
<script> 
document.addEventListener("click",function(){ 
document.getElementById("myDiv").style.transformRotateX += 10deg; 
}) 
</script> 

Answer 1

당신이 할 수있는 것은 velocity.js에 의존, 당신은 개인이 누적 속성을 변환 수정할 수 있습니다. 장점은 velocity.js가 애니메이션을 위해 jQuery가 아닌 JavaScript에 의존하므로 더 효율적으로 만들고 레이아웃 스 래싱을 방지합니다. 당신이 요소 선택의 용이성을 위해 jQuery를 및/또는 Zepto에 의존하려는 경우 물론

var ele = document.getElementById("myDiv"); 
 

 
// Establish initial transformation onload 
 
Velocity(
 
    ele, 
 
    { 
 
    rotateX: '90deg', 
 
    rotateY: '10deg' 
 
    }, 
 
    { 
 
    duration: 0 
 
    }); 
 

 
// Progressively manipulate rotateX property upon each click 
 
document.addEventListener("click",function(){ 
 
    Velocity(
 
    ele, 
 
    { 
 
     translateZ: 0, // Force HA by animating a 3D property 
 
     rotateX: "+=10deg" 
 
    }, 
 
    { 
 
     duration: 0 
 
    } 
 
); 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script> 
 
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>

---

은 그도 가능합니다 :

$(function() { 
 
    // Establish initial transformation onload 
 
    $('#myDiv').velocity({ 
 
    rotateX: '90deg', 
 
    rotateY: '10deg' 
 
    }, { 
 
    duration: 0; 
 
    }); 
 
    
 
    // Progressively manipulate rotateX property upon each click 
 
    $('#myDiv').click(function() { 
 
    $(this).velocity({ 
 
     rotateX: '+=10deg' 
 
    }, { 
 
     duration: 0 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script> 
 
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>