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
Barbara StreisandOriginal
2024-12-07 13:47:15874Durchsuche

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

Verwendung:

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

angle1 = getRotationDegrees($('#myDiv'));

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

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

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!

Stellungnahme:
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