변환 -moz-요소를 가져옵니다 : jQuery를에 회전 값

해결법

1.여기에 jQuery를 사용하여 내 솔루션입니다.

여기에 jQuery를 사용하여 내 솔루션입니다.

수치가 회전에 해당하는이 반환은 HTML 요소에 적용했다.

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}

angle1 = getRotationDegrees($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));

기타...

2.함수 반환 부정적 각도 : 나는 버그 / 트위스트의 코드에 기능을 발견했습니다.

함수 반환 부정적 각도 : 나는 버그 / 트위스트의 코드에 기능을 발견했습니다.

나는 각도를 반환하기 전에 코드의 간단한 라인을 추가했습니다 그래서 :

if(angle < 0) angle +=360;

보다에게 결과가 될 것입니다 :

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }

    if(angle < 0) angle +=360;
    return angle;
}

3.내 솔루션 (jQuery를 사용하여) :

내 솔루션 (jQuery를 사용하여) :

$.fn.rotationInfo = function() {
    var el = $(this),
        tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
        info = {rad: 0, deg: 0};
    if (tr = tr.match('matrix\\((.*)\\)')) {
        tr = tr[1].split(',');
        if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
            info.rad = Math.atan2(tr[1], tr[0]);
            info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
        }
    }
    return info;
};

용법:

$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5

4.여기에 플러그인 트위스트의 기능의 버전입니다. 또한, 조건 (매트릭스! == '없음')는 나를 위해 작동하지 않았다합니다. 나는 유형 검사를 추가 한 그래서 :

여기에 플러그인 트위스트의 기능의 버전입니다. 또한, 조건 (매트릭스! == '없음')는 나를 위해 작동하지 않았다합니다. 나는 유형 검사를 추가 한 그래서 :

(function ($) {
    $.fn.rotationDegrees = function () {
         var matrix = this.css("-webkit-transform") ||
    this.css("-moz-transform")    ||
    this.css("-ms-transform")     ||
    this.css("-o-transform")      ||
    this.css("transform");
    if(typeof matrix === 'string' && matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return angle;
   };
}(jQuery));

다음과 같이 사용합니다 :

var rotation = $('img').rotationDegrees();

5.하는 CSS tranform 속성은 항상 등 회전, 기울이기, 규모로, 매트릭스 값을 반환 단지 속기 그러나 행렬이 브라우저에 의해 계산 매트릭스로 적용되고, 일을 더 쉽게, 그리고 매트릭스 값을 매번 계산하지 않아도에 대한 , 그리고는 더 이상 다시 행렬을 재 계산하지 않고 각도로 회전 정도를 반환 할 수 있습니다 완료되면.

하는 CSS tranform 속성은 항상 등 회전, 기울이기, 규모로, 매트릭스 값을 반환 단지 속기 그러나 행렬이 브라우저에 의해 계산 매트릭스로 적용되고, 일을 더 쉽게, 그리고 매트릭스 값을 매번 계산하지 않아도에 대한 , 그리고는 더 이상 다시 행렬을 재 계산하지 않고 각도로 회전 정도를 반환 할 수 있습니다 완료되면.

매트릭스 값에서 회전 정도를 얻을 것을보고 시도, 쉬운 행렬 계산의 목적을 위해 만들어진 실베스터라는 자바 스크립트 라이브러리가 같은 calcualtions 쉽게합니다.

어디 행렬에 회전 각도를 변환하는 자바 스크립트의 회전 기능을 작성하는 경우에도, 아마 이런 식으로 뭔가를 (이 용도는 마지막 계산 실베스터) 보일 것이다 :
```
var Transform = {
    rotate: function(deg) {
        var rad = parseFloat(deg) * (Math.PI/180),
            cos_theta = Math.cos(rad),
            sin_theta = Math.sin(rad);

        var a = cos_theta,
            b = sin_theta,
            c = -sin_theta,
            d = cos_theta;

        return $M([
          [a, c, 0],
          [b, d, 0],
          [0, 0, 1]
        ]);
    }
};
```
이제 모든 당신이 정말로해야 할 넌 황금 역 설계는 기능입니다 :-)
6.이 스크립트는 매우 도움이된다 https://github.com/zachstronaut/jquery-css-transform

이 스크립트는 매우 도움이된다 https://github.com/zachstronaut/jquery-css-transform

7.나는이 작업 코드와 바이올린이 3D에 rotateX Y Z를 얻을 수 있도록, 또는 rotateZ 차원 변환합니다. 덕분에 난 작은 실제 JQuery와 2.2.3로 업데이트 한 것을 기본 코드 mihn합니다. 나는 현재 내 자신의 프로젝트에이 솔루션을 사용합니다.

나는이 작업 코드와 바이올린이 3D에 rotateX Y Z를 얻을 수 있도록, 또는 rotateZ 차원 변환합니다. 덕분에 난 작은 실제 JQuery와 2.2.3로 업데이트 한 것을 기본 코드 mihn합니다. 나는 현재 내 자신의 프로젝트에이 솔루션을 사용합니다.

https://jsfiddle.net/bragon95/49a4h6e9/

    //
//Thanks: Adapted on base code from mihn http://stackoverflow.com/a/20371725
//

function getcsstransform(obj)
{
    var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);

  var TType="undefined",
        rotateX = 0,
        rotateY = 0,
      rotateZ = 0;

  var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform") ||
    obj.css("-ms-transform") ||
    obj.css("-o-transform") ||
    obj.css("transform");
  if (matrix!==undefined && matrix !== 'none')
  {
        // if matrix is 2d matrix
    TType="2D";
    if (matrix.indexOf('matrix(') >= 0)
    {
      var values = matrix.split('(')[1].split(')')[0];
      if (isIE)  //case IE
      {
        angle = parseFloat(values.replace('deg', STR_EMPTY));
      }else
      {
        values = values.split(',');
        var a = values[0];
        var b = values[1];
        var rotateZ = Math.round(Math.atan2(b, a) * (180 / Math.PI));
      }
    }else
    {
      // matrix is matrix3d
      TType="3D";
      var values = matrix.split('(')[1].split(')')[0].split(',');
      var sinB = parseFloat(values[8]);
      var b = Math.round(Math.asin(sinB) * 180 / Math.PI);
      var cosB = Math.cos(b * Math.PI / 180);
      var matrixVal10 = parseFloat(values[9]);
      var a = Math.round(Math.asin(-matrixVal10 / cosB) * 180 / Math.PI);
      var matrixVal1 = parseFloat(values[0]);
      var c = Math.round(Math.acos(matrixVal1 / cosB) * 180 / Math.PI);
      rotateX = a;
      rotateY = b;
      rotateZ = c;
    }
  }

    return  { TType: TType, rotateX: rotateX,  rotateY: rotateY,  rotateZ: rotateZ };
};

mAngle = getcsstransform($("#Objet3D"));
if (mAngle.TType=="2D")
{
    $("#Result").html("Transform 2D [rotateZ=" + mAngle.rotateZ + "&deg;]");
}else
{
    $("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "&deg;|rotateY=" + mAngle.rotateY + "&deg;|rotateZ=" + mAngle.rotateZ + "&deg;]");
}

8.당신은 당신이 설명한 방법으로이 작업을 수행 할 경우, 어떤이는 당신이 실제로 브라우저가 사용자가 할당 한 접두어 값의 일부가 동시에 브라우저의 4 종류가 될 수 없기 때문에 해당 객체의 변환 수정할 수있는 유일한 장소입니다 아직도 당신은 그들에게 할당 된 그대로. 그래서 예를 들어, 당신은 웹킷을 사용하는 경우, 다음 this.css ( '- 오 - 변환')가 /rotate$(.*)deg에 대해 그것을 일치의 문제 그래서, '회전 (7.5deg)를'아직 돌아갑니다 $ /.

당신은 당신이 설명한 방법으로이 작업을 수행 할 경우, 어떤이는 당신이 실제로 브라우저가 사용자가 할당 한 접두어 값의 일부가 동시에 브라우저의 4 종류가 될 수 없기 때문에 해당 객체의 변환 수정할 수있는 유일한 장소입니다 아직도 당신은 그들에게 할당 된 그대로. 그래서 예를 들어, 당신은 웹킷을 사용하는 경우, 다음 this.css ( '- 오 - 변환')가 /rotate$(.*)deg에 대해 그것을 일치의 문제 그래서, '회전 (7.5deg)를'아직 돌아갑니다 $ /.

그들 중 적어도 하나는 그대로 될 것으로 기대하고, 나는 항상 할당 5 개 CSS 스타일, 그리고 다섯 개 가지 스타일을 다시 읽어 : 이것은 나를 위해 벌금을했다. 나는 확실히 스타일의 경우이 작품은 비록 (안 JS에서) CSS에 설정되어 있지 않다 경우.
9.또한이 VAR 각도 = Math.round 대체 할 수있는 (Math.atan2 (B를 A) * (180 / Math.PI로)); VAR 각도 = Math.round 행 (Math.acos (a) * (180 / Math.PI로));

또한이 VAR 각도 = Math.round 대체 할 수있는 (Math.atan2 (B를 A) * (180 / Math.PI로)); VAR 각도 = Math.round 행 (Math.acos (a) * (180 / Math.PI로));
10.나는 항상 함께 TweenMax로하고 TweenMax 이후 jQuery를 사용할 필요가 있기 때문에 이미 나는 여기에 수 (GSAP의의 랩까지의 이상) 플러그인 작은 jQuery를 썼다 잘 호환성 문제 등으로 변환 문자열의 여러 유형의 구문 분석을 모두 처리했다 직접이 같은이 값에 액세스 :

나는 항상 함께 TweenMax로하고 TweenMax 이후 jQuery를 사용할 필요가 있기 때문에 이미 나는 여기에 수 (GSAP의의 랩까지의 이상) 플러그인 작은 jQuery를 썼다 잘 호환성 문제 등으로 변환 문자열의 여러 유형의 구문 분석을 모두 처리했다 직접이 같은이 값에 액세스 :
```
$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x
```
초기 특성과 함께 당신이 얻을 수있는 특성 / 세트 목록 :
```
perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0
```
내 다른 대답에서 붙여 넣기이 도움이되기를 바랍니다.
11.당신은 단지 이러한 변화에 대한 인라인 스타일을 사용하고자하는 경우에, 당신은 스타일 태그의 내용을 얻기 위해 jQuery를 사용할 수 있습니다 :

당신은 단지 이러한 변화에 대한 인라인 스타일을 사용하고자하는 경우에, 당신은 스타일 태그의 내용을 얻기 위해 jQuery를 사용할 수 있습니다 :
```
parseInt($(  /*TODO*/  ).attr('style').split('rotate(')[1].split('deg)')[0]);
```

from https://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 입력 파일 컨트롤에서 하나의 특정 선택한 파일을 제거합니다 (0)	2020.10.21
[JQUERY] 클릭 링크 이후로 파일을 저장하려면 브라우저를 강제로 [중복] (0)	2020.10.21
[JQUERY] jQuery를 클론 ()조차에로, 이벤트 바인딩을 복제 () (0)	2020.10.21
[JQUERY] 자바 스크립트 또는 jQuery를 브라우저의 뒤로 버튼을 클릭 검출기 (0)	2020.10.21
[JQUERY] PHP 스크립트에 Ajax를 배열 보내기 (0)	2020.10.21

복붙노트

[JQUERY] 변환 -moz-요소를 가져옵니다 : jQuery를에 회전 값

변환 -moz-요소를 가져옵니다 : jQuery를에 회전 값

해결법

1.여기에 jQuery를 사용하여 내 솔루션입니다.

2.함수 반환 부정적 각도 : 나는 버그 / 트위스트의 코드에 기능을 발견했습니다.

3.내 솔루션 (jQuery를 사용하여) :

4.여기에 플러그인 트위스트의 기능의 버전입니다. 또한, 조건 (매트릭스! == '없음')는 나를 위해 작동하지 않았다합니다. 나는 유형 검사를 추가 한 그래서 :

6.이 스크립트는 매우 도움이된다 https://github.com/zachstronaut/jquery-css-transform

9.또한이 VAR 각도 = Math.round 대체 할 수있는 (Math.atan2 (B를 A) * (180 / Math.PI로)); VAR 각도 = Math.round 행 (Math.acos (a) * (180 / Math.PI로));

11.당신은 단지 이러한 변화에 대한 인라인 스타일을 사용하고자하는 경우에, 당신은 스타일 태그의 내용을 얻기 위해 jQuery를 사용할 수 있습니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바