2014-03-01 5 views
0

YOffset을 기준으로 앞뒤로 회전하고 이미지를 만드는 코드가 있습니다. 그러나, 나는 내 이미지가 회전되어있는 각도를 얻는 방법을 알고 싶고 그것을 if 문으로 사용하고 싶다.개체의 회전 값을 얻는 방법 JQuery/CSS

코드 :

<script type="text/javascript"> 
    $(function() { 
     var sdegree = 0; 
     $(window).scroll(function() { 
      sdegree = (window.pageYOffset > 1000) ? sdegree + 4 : sdegree - 4; 
      var srotate = "rotate(" + sdegree + "deg)"; 
      $(".plane").css({ 
      transform : srotate 
     }); 
     }); 
    }); 
</script> 

내가 원하는 무엇 :

<script type="text/javascript"> 
    $(function() { 
     var sdegree = 0; 
     $(window).scroll(function() { 
      sdegree = (//INSERT DEGREES that .plane has been rotated > 30deg)// ? sdegree + 4 : sdegree - 4; 
      var srotate = "rotate(" + sdegree + "deg)"; 
      $(".plane").css({ 
       transform : srotate 
      }); 
     }); 
    }); 
</script> 
+0

브라우저에서 변환 속성을 다시 가져올 때 걱정되는 ** Matrix **가 표시되고도가 아닌 것으로 추측합니다. – adeneo

+0

yuppp 불행히도 :/ – user3344534

+0

-4 또는 +4 회전 여부를 확인하기위한 조건이라면 대신 플래그를 사용할 수 있습니까? – adeneo

답변

0

실제로 최근뿐만 아니라 요소의 회전 정도를 얻을 수 있었다. 내 방법이 유사했다 : 당신은 당신이 각도의 기반으로 원하는 if 문 사용할 수 있습니다

function calculateAngle(element) { 
    var tr = (window.getComputedStyle(element, null)).getPropertyValue("-webkit-transform"), 
     values = tr.split("(")[1], 
     values = values.split(")")[0], 
     values = values.split(","), 
     a = values[0], 
     b = values[1], 
     c = values[2], 
     d = values[3], 
     radians = Math.atan2(b, a); 
    if (radians < 0) { 
     radians += (2 * Math.PI); 
    } 
    return Math.round(radians * (180/Math.PI)); 
} 

var element = document.getElementById("rotate"); 
calculateAngle(element); 

Example

.

관련 문제