Get element-moz-transform:rotate value in jQuery

Znalazłem błąd / funkcje w kodzie zwrotnym: funkcja zwraca ujemne kąty.

Więc dodałem prosty wiersz kodu przed zwróceniem angle:

if(angle < 0) angle +=360;

Wyniki będą następujące:

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;
}

Oto wersja wtyczki funkcji Twist. Również warunkowe if (matrix != = "brak") nie zadziałało dla mnie. Więc dodałem sprawdzanie typu:

(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));

Stosować w następujący sposób:

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

Właściwość CSS tranform zawsze zwróci wartość macierzy, jak rotate, skew, scale itp. jest po prostu skrótem od robienia rzeczy łatwiejszych i nie konieczności obliczania wartości macierzy za każdym razem, jednak macierz jest obliczana przez przeglądarkę i stosowana jako macierz, a kiedy to jest zrobione, nie może już zwracać obracanego stopnia o kąt bez ponownego przeliczenia macierzy z powrotem.

Aby ułatwić takie obliczenia istnieje biblioteka javascript o nazwie Sylvester , która była stworzony w celu łatwego obliczenia macierzy, spróbuj spojrzeć na to, aby uzyskać stopień rotacji z wartości macierzy.

Ponadto, jeśli piszesz funkcję rotate w javascript, aby przetłumaczyć stopnie rotacyjne na macierz, prawdopodobnie wyglądałoby to mniej więcej tak (to używa Sylvestra do ostatniego obliczenia):

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]
        ]);
    }
};

Teraz wszystko co naprawdę musisz zrobić to reverse enginer tej funkcji i jesteś złoty: -)

Moje rozwiązanie (używając 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;
};

Użycie :

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

Ten skrypt jest bardzo pomocny https://github.com/zachstronaut/jquery-css-transform

Jeśli zrobisz to w sposób opisany, w każdym razie jest to jedyne miejsce, w którym faktycznie zmodyfikujesz transformację obiektu, to ponieważ twoja przeglądarka nie może być wszystkimi 4 rodzajami przeglądarek w tym samym czasie, niektóre z przypisanych przedrostków wartości są nadal dokładnie takie, jakie im przypisałeś. Na przykład, jeśli używasz webkit, to this.css('-o-transform') nadal zwróci 'rotate(7.5deg)', więc jest to tylko kwestia dopasowania go do /rotate\((.*)deg\)/.

To działało dobrze dla mnie: zawsze przypisuję 5 stylów css i odczytuję wszystkie pięć styles, mając nadzieję, że przynajmniej jeden z nich będzie nietknięty. Nie jestem pewien, czy to działa, jeśli style są ustawione w CSS (nie w JS).

Można też zamienić var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); Na var angle = Math.round(Math.acos(a) * (180/Math.PI));

Ponieważ ciągle muszę używać jQuery razem z TweenMax i ponieważ TweenMax już zajął się wszystkimi analizami różnych typów ciągów transformacji, a także problemami ze zgodnością, napisałem mały wtyczka jquery TUTAJ (bardziej podsumowanie gsap), które mogłyby bezpośrednio uzyskać dostęp do tych wartości, jak to:

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

Lista właściwości, które można uzyskać / ustawić, wraz z ich początkowymi właściwościami:

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

Wklej z mojej drugiej odpowiedzi, mam nadzieję, że to pomoże.

Mam zrobić Majsterkowanie z tym działającym kodem, aby uzyskać rotateX Y Z NA 3D, lub rotateZ dla transformacji 2D. Dzięki mihn za kod podstawowy, który mam mało zaktualizowany z rzeczywistą jquery 2.2.3. Obecnie korzystam z tego rozwiązania przy własnych projektach.

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 + "°]");
}else
{
    $("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "°|rotateY=" + mAngle.rotateY + "°|rotateZ=" + mAngle.rotateZ + "°]");
}

Jeśli chcesz używać stylizacji in-line do tej transformacji, możesz użyć jQuery, aby uzyskać zawartość tagu style:

parseInt($(  /*TODO*/  ).attr('style').split('rotate(')[1].split('deg)')[0]);