Comment positionner un élément pivoté dans le coin supérieur gauche ou supérieur droit ?

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 la 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 sa position appropriée.

Voici un exemple de code :

<div class="credit">
  Picture by Name
</div>

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, remplacez simplement transform-origin par "top right" 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 si nécessaire pour répondre à vos besoins 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.

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!