La traduction seule peut-elle parfaitement imiter l'origine de la transformation CSS ?

Simulation de Transform-Origin à l'aide de la traduction : résolution des écarts de mise à l'échelle et de rotation

En CSS, la propriété transform-origin permet un positionnement précis de la propriété d'un élément transformation autour d’un point précis. Cependant, la réplication de ses fonctionnalités en utilisant uniquement transform:translate peut poser des problèmes, en particulier lorsqu'elle est combinée avec des transformations d'échelle et de rotation.

Selon la documentation MDN, la simulation de transform-origin avec translation implique :

1. Néger la valeur d'origine de transformation spécifiée et l'appliquer comme traduction initiale.
2. Appliquer la valeur souhaitée transformation.
3. Traduction de l'élément par la valeur transformée d'origine.

Malgré cette approche, les développeurs rencontrent généralement des résultats incorrects lorsqu'ils tentent d'imiter le comportement d'origine de la transformation. Voici les raisons derrière ces écarts :

1. Inversion des traductions :

Le code CSS fourni inclut une erreur dans l'ordre des traductions au sein de la classe .translate. Pour simuler correctement l'origine de la transformation, les traductions initiales et finales doivent être inversées. Voici le code révisé :

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

2. Ajustement de Transform-Origin :

Un autre problème réside dans la propriété transform-origin de la classe .translate. Par défaut, transform-origin est défini sur center (50 % 50 %). Cependant, pour correspondre au comportement de transformation-origine, nous devons déplacer ce point de référence vers le coin supérieur gauche (0 0) de l'élément.

.translate {
  transform-origin: 0 0;
  ...
}

En incorporant ces modifications, nous pouvons obtenir une simulation précise d'origine de transformation en utilisant traduire. Ces corrections devraient résoudre les incohérences de mise à l'échelle et de rotation observées dans le code CSS d'origine.

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!