Comment puis-je simuler CSS « transform-origin » à l'aide de « translate » ?

Simulation de l'origine de la transformation avec traduction : un guide complet

Comprendre l'origine de la transformation

La propriété Transform-origin spécifie le point autour duquel un élément se transforme. La définition de cette propriété nous permet de contrôler la rotation, la mise à l'échelle ou l'inclinaison d'un élément avec une plus grande précision.

Simuler Transform-Origin avec Translate

La documentation officielle de CSS indique que l'origine de la transformation peut être simulée à l'aide de la transformation de traduction. Le processus est le suivant :

• Traduire l'élément par la valeur niée de la propriété transform-origin.
• Appliquer la transformation souhaitée (par exemple, mettre à l'échelle, faire pivoter).
• Traduisez l'élément par la valeur de la propriété transform-origin.

Dépannage des résultats incorrects

Si vos tentatives de simulation de transformation-origine avec la traduction échoue, vous avez peut-être rencontré l'une des deux erreurs courantes :

Erreur 1 : Ordre de traduction incorrect

La simulation d'origine de transformation implique trois opérations de traduction : la négation initiale la traduction, la transformation souhaitée et la traduction positive finale. Il est crucial d'exécuter ces traductions dans le bon ordre.

Exemple :

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

Dans cet exemple, la traduction initiale est correcte, mais la traduction finale doit être traduire(100px, 100px) au lieu de traduire(-100px, -100px) pour annuler la traduction initiale et restaurer l'élément à sa position d'origine.

Erreur 2 : origine de transformation incompatible

Assurez-vous que l'élément d'origine avec transform-origin et l'élément simulé avec translation ont la même transformation-origin. L'origine de transformation par défaut est le centre de l'élément, et il est crucial soit de la définir explicitement dans les deux cas, soit de la laisser par défaut.

Exemple :

.translate {
  transform-origin: 0 0;
  transform: translate(-50px, -50px) rotate(45deg) scale(2) translate(50px, 50px);
}

Ici, l'origine de la transformation a été explicitement définie dans le coin supérieur gauche de l'élément, ce qui correspond à l'origine de la transformation par défaut de l'élément d'origine.

Conclusion

En corrigeant ces erreurs et en garantissant un ordre de traduction et une origine de transformation appropriés, vous pouvez simuler efficacement l'origine de la transformation à l'aide de la transformation de traduction. Cette technique ouvre diverses possibilités créatives pour la manipulation et l'animation d'éléments en CSS.

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!