Positionnement d'un élément pivoté dans le coin supérieur gauche ou supérieur droit

Lors de la rotation d'un élément, il est crucial de comprendre comment transform-origin affecte son positionnement. Cette propriété spécifie le point autour duquel l'élément sera pivoté. En ajustant l'origine de la transformation, vous pouvez contrôler efficacement la position finale de l'élément après la rotation.

Pour positionner un élément pivoté dans le coin supérieur gauche, modifiez son origine de transformation en "en haut à gauche" et définissez TranslateX sur "- 100%". Cela garantira que l'élément pivote autour du coin supérieur gauche et se déplace vers la position appropriée.

Voici un exemple de code :

  Picture by Name

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

À l'inverse, pour positionner l'élément pivoté dans le coin supérieur droit, changez simplement transform-origin en "en haut à droite" et maintenez TranslateX défini sur "-100%".

Vous pouvez explorer cette implémentation dans le violon fourni : [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

N'oubliez pas d'ajuster les valeurs de positionnement selon vos besoins exigences spécifiques. Expérimentez avec différents paramètres d'origine de transformation pour obtenir l'alignement et la disposition souhaités pour vos éléments pivotés.