jquery legt das Rotationszentrum fest

Mit dem Aufkommen von CSS3 haben immer mehr Webdesigner und Entwickler damit begonnen, verschiedene CSS3-Animationseffekte zu verwenden, um dynamische Seiteneffekte zu erstellen. Unter diesen ist der Rotationsanimationseffekt ein sehr häufiger Effekt. Wenn Sie jQuery zum Erstellen eines Rotationseffekts verwenden, ist die Festlegung des Rotationszentrums sehr wichtig.

Im Allgemeinen verwenden wir CSS3, um Rotationsanimationseffekte zu erstellen, und wir können den gewünschten Rotationseffekt erzielen, indem wir das Rotationszentrum festlegen. In jQuery gibt es unterschiedliche Möglichkeiten, Rotationsanimationseffekte zu erzielen, daher erfordert das Festlegen des Rotationszentrums auch zusätzliche Überlegungen.

Um Rotationsanimationseffekte zu erzielen, verwenden wir normalerweise die animate()-Funktion von jQuery, um Attribute wie Rotationswinkel und Dauer zu steuern. Wenn wir jedoch kein Rotationszentrum angeben, ist das Rotationszentrum standardmäßig die obere linke Ecke des Elements.

Stellen Sie sich vor, das Element, das wir drehen möchten, wäre ein Quadrat und das Standarddrehzentrum wäre die obere linke Ecke. Wenn sich das Element dann gegen den Uhrzeigersinn dreht, bleibt seine untere rechte Ecke immer an der ursprünglichen Position des Elements hängen. Dies führt dazu, dass die Elemente beim Drehen stark blinken und springen, was dem Benutzer ein schlechtes visuelles Erlebnis beschert.

Daher müssen wir das Rotationszentrum angeben, um den Rotationseffekt zu steuern.

jQuery implementiert den Rotationsanimationseffekt

Wenn wir jQuery zum Implementieren des Rotationsanimationseffekts verwenden, verwenden wir normalerweise das Transformationsattribut. Das Transformationsattribut kann den Drehwinkel des Elements steuern, indem die Funktion „Rotate()“ festgelegt wird.

Wenn wir jedoch nur die Funktion „rotieren()“ festlegen und das Rotationszentrum nicht angeben, verwendet das Element die standardmäßige obere linke Ecke als Rotationszentrum.

Um das Rotationszentrum bei der Implementierung des Rotationsanimationseffekts anzugeben, müssen wir die Eigenschaft transform-origin in CSS3 verwenden.

Das transform-origin-Attribut besteht aus drei Werten. Der erste Wert wird verwendet, um die Position auf der X-Achse darzustellen, der zweite Wert stellt die Position auf der Y-Achse dar und der dritte Wert kann Länge, Prozentsatz, Schlüsselwörter usw. sein und zur Steuerung des Drehwinkels des Elements verwendet werden entlang der Z-Achse.

Normalerweise setzen wir das Attribut transform-origin, um das Rotationszentrum wie folgt anzugeben:

$(selector).css("transform-origin", x-axis y-axis);

Im obigen Code x -Achse und Y-Achse stellen jeweils die Koordinaten des Rotationszentrums dar, die wir festlegen müssen. Insbesondere müssen Sie den Versatz der Drehzentrumskoordinate relativ zur oberen linken Ecke des Elements angeben.

Wenn wir beispielsweise den Mittelpunkt des Elements als Rotationszentrum verwenden möchten, müssen wir die Koordinaten des Rotationszentrums auf „50 % 50 %“ festlegen.

Beispielcode:

html:

<div id="box"></div>

css:

#box{
    width: 100px;
    height: 100px;
    background-color: red;
}

javascript:

$("#box").animate({rotate:"180deg"},2000);
$("#box").css("transform-origin", "50% 50%");

Im obigen Code verwenden wir die animate()-Funktion von jQuery, um den Elementdrehwinkel zu steuern und das Rotationszentrum anzugeben, bevor das Element gedreht wird Die Koordinaten lauten „50 % 50 %“.

Durch die Angabe des Rotationszentrums können wir die Positionsänderung des Elements während der Rotation leicht steuern und offensichtliche Flacker- und Sprungphänomene vermeiden.

Fazit

Das Erstellen dynamischer Effekte ist ein wesentlicher Bestandteil des modernen Webdesigns. Die Fähigkeit, das Rotationszentrum von Animationseffekten genau zu steuern, ist die grundlegende Fähigkeit zur Erzeugung verschiedener Animationseffekte.

Achten Sie bei der Verwendung von jQuery zum Erzielen von Rotationsanimationseffekten unbedingt auf die Einstellung des Rotationszentrums. Durch die richtige Einstellung des Rotationszentrums können wir eine Vielzahl cooler Animationseffekte erstellen, um das Benutzererlebnis zu verbessern und die Website attraktiver zu machen.

Das obige ist der detaillierte Inhalt vonjquery legt das Rotationszentrum fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!