La traduction peut-elle remplacer Transform-Origin ?

Simulation de l'origine de la transformation à l'aide de Translate : dévoiler le secret

La propriété transform-origin de CSS offre un contrôle inégalé sur le point d'origine des transformations. Cependant, vous pouvez ingénieusement reproduire ses fonctionnalités en utilisant une transformation pure : traduisez si vous suivez ces étapes :

1. Inverser les traductions :

Contrairement à votre tentative initiale, vous devez inverser les valeurs de traduction pour obtenir le résultat correct. En effet, la traduction interprète les valeurs positives comme se déplaçant vers la droite ou vers le bas, tandis que la transformation-origine mesure à partir du coin supérieur gauche.

2. Aligner les origines de transformation :

L'origine de transformation par défaut est définie au centre de l'élément. Pour que votre simulation fonctionne correctement, alignez l'origine de la transformation de l'élément que vous transformez à l'aide de la technique de traduction sur le coin supérieur gauche (0, 0).

Exemple :

Considérez ce code révisé :

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

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

En suivant ces principes, vous pouvez simuler efficacement le comportement de transform-origin à l'aide de translation, vous permettant pour débloquer facilement des transformations nuancées.

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!