jquery définit le centre de rotation

Avec l'essor de CSS3, de plus en plus de concepteurs et de développeurs Web ont commencé à utiliser divers effets d'animation CSS3 pour créer des effets de page dynamiques. Parmi eux, l’effet d’animation de rotation est un effet très courant. Lorsque vous utilisez jQuery pour créer un effet de rotation, la manière de définir le centre de rotation devient très importante.

Généralement, nous utilisons CSS3 pour créer des effets d'animation de rotation, et nous pouvons obtenir l'effet de rotation souhaité en définissant le centre de rotation. Dans jQuery, les façons d'obtenir des effets d'animation de rotation sont différentes, donc la définition du centre de rotation nécessite également une considération supplémentaire.

Afin d'obtenir l'effet d'animation de rotation, nous utilisons généralement la fonction animate() de jQuery pour contrôler l'angle de rotation, la durée et d'autres attributs. Cependant, si nous ne spécifions pas de centre de rotation, alors par défaut le centre de rotation sera le coin supérieur gauche de l'élément.

Imaginez si l'élément que nous voulons faire pivoter est un carré et que le centre de rotation par défaut est le coin supérieur gauche. Ensuite, lorsque l'élément tourne dans le sens inverse des aiguilles d'une montre, son coin inférieur droit sera toujours bloqué à la position d'origine de l'élément. Cela fera clignoter et sauter considérablement les éléments lors de la rotation, offrant aux utilisateurs une mauvaise expérience visuelle.

Nous devons donc spécifier le centre de rotation afin de contrôler l'effet de rotation.

jQuery implémente l'effet d'animation de rotation

Lorsque nous utilisons jQuery pour implémenter l'effet d'animation de rotation, nous utilisons généralement l'attribut transform. L'attribut transform peut contrôler l'angle de rotation de l'élément en définissant la fonction rotate().

Cependant, si nous définissons simplement la fonction rotate() et ne spécifions pas le centre de rotation, alors l'élément utilisera le coin supérieur gauche par défaut comme centre de rotation.

Afin de spécifier le centre de rotation lors de l'implémentation de l'effet d'animation de rotation, nous devons utiliser la propriété transform-origin en CSS3.

L'attribut transform-origin est composé de trois valeurs. La première valeur est utilisée pour représenter la position sur l'axe X, la deuxième valeur représente la position sur l'axe Y et la troisième valeur peut être une longueur, un pourcentage, des mots-clés, etc., utilisés pour contrôler l'angle de rotation de l'élément. le long de l'axe Z.

Habituellement, nous définissons l'attribut transform-origin pour spécifier le centre de rotation comme suit :

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

Dans le code ci-dessus, l'axe des x et l'axe des y représentent respectivement les coordonnées du centre de rotation que nous devons définir. Plus précisément, vous devez spécifier le décalage de la coordonnée du centre de rotation par rapport au coin supérieur gauche de l'élément.

Par exemple, si nous voulons utiliser le point central de l'élément comme centre de rotation, nous devons définir les coordonnées du centre de rotation sur "50% 50%".

Exemple de code :

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%");

#🎜 🎜#Dans le code ci-dessus, nous utilisons la fonction animate() de jQuery pour contrôler l'angle de rotation de l'élément et spécifions la coordonnée du centre de rotation comme "50% 50%" avant la rotation de l'élément.

En spécifiant le centre de rotation, nous pouvons facilement contrôler le changement de position de l'élément pendant la rotation et éviter les scintillements et les sauts évidents.

Conclusion

La création d'effets dynamiques est une partie essentielle de la conception Web moderne. La capacité de contrôler avec précision le centre de rotation des effets d’animation est la compétence de base pour produire divers effets d’animation.

Lorsque vous utilisez jQuery pour obtenir des effets d'animation de rotation, vous devez faire attention au réglage du centre de rotation. En définissant correctement le centre de rotation, nous pouvons créer une variété d’effets d’animation sympas pour améliorer l’expérience utilisateur et rendre le site Web plus attrayant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!