Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit jQuery den Rotationswert aus der CSS-Transformation eines Elements extrahieren?

Wie kann ich mit jQuery den Rotationswert aus der CSS-Transformation eines Elements extrahieren?

Barbara Streisand
Freigeben: 2024-12-07 13:47:15
Original
876 Leute haben es durchsucht

How Can I Extract the Rotation Value from an Element's CSS Transform Using jQuery?

Elementrotationswert mit jQuery abrufen

In CSS ist es üblich, Transformationen auf Elemente mithilfe der Eigenschaft -moz-transform anzuwenden. Das Extrahieren des spezifischen Rotationswerts aus dieser Eigenschaft mithilfe von jQuery war jedoch eine Herausforderung.

Frage:

Wie erhält man den numerischen Rotationswert, der auf ein bestimmtes HTML-Element angewendet wird? über jQuery, obwohl es in einer komplexen Matrixtransformation gespeichert ist string?

Antwort:

Diese Lösung stellt eine jQuery-Funktion bereit, die die Rotationsgrade aus der Eigenschaft -moz-transform extrahiert:

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;
}
Nach dem Login kopieren

Verwendung:

Um den Rotationswert des Elements mit der Klasse myDiv abzurufen, verwenden Sie:

angle1 = getRotationDegrees($('#myDiv'));
Nach dem Login kopieren

Für den letzten Anker innerhalb des Elements mit der Klasse mySpan verwenden Sie:

angle2 = getRotationDegrees($('.mySpan a:last-child'));
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery den Rotationswert aus der CSS-Transformation eines Elements extrahieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage