Comment puis-je simuler CSS « transform-origin » en utilisant uniquement « transform : translate » ?

Simulation de Transform-Origin à l'aide de Translate en CSS

En CSS, la propriété transform-origin définit le point d'origine pour appliquer des transformations à un élément . Il est important de noter que cette propriété est appliquée en traduisant d'abord l'élément par la valeur niée de sa propre propriété transform-origin, puis en appliquant la transformation de l'élément, puis en traduisant par la valeur de la propriété.

Pour simuler le comportement de transform-origin à l'aide de transform:translate, les étapes suivantes sont nécessaires :

1. Négatez les valeurs de transform-origin : Les valeurs pour transform-origin doit être nié avant de les appliquer comme traductions. En effet, la transformation de traduction appliquera une valeur négative au point d'origine, inversant ainsi l'origine.
2. Appliquer la transformation de l'élément : Après avoir annulé les valeurs d'origine de la transformation, la transformation de l'élément peut être appliqué comme d'habitude.
3. Traduire l'origine : Enfin, traduisez l'origine dans sa position d'origine en utilisant le positif valeurs d'origine de transformation annulées. Cette étape garantit que le point d'origine est réinitialisé à son emplacement prévu.

Exemple incorrect :

Dans l'exemple fourni, le problème concerne des traductions incorrectes. Les valeurs niées pour transform-origin sont appliquées correctement, mais la traduction finale est manquante. Le code corrigé suivant produira des résultats précis :

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

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

Exemple correct :

Cet exemple corrigé inclut l'étape de traduction finale, qui est nécessaire pour restaurer le point d'origine à sa position prévue. Par conséquent, les boîtes présenteront la même apparence transformée, démontrant que l'origine de la transformation peut effectivement être simulée à l'aide de transform:translate.

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!