Positionieren eines gedrehten Elements in der oberen linken oder oberen rechten Ecke

Beim Drehen eines Elements ist es wichtig zu verstehen, wie die Transformation entsteht beeinflusst seine Positionierung. Diese Eigenschaft gibt den Punkt an, um den das Element gedreht wird. Durch Anpassen des Transformationsursprungs können Sie die endgültige Position des Elements nach der Drehung effektiv steuern.

Um ein gedrehtes Element in der oberen linken Ecke zu positionieren, ändern Sie seinen Transformationsursprung in „oben links“ und setzen Sie TranslateX auf „- 100 %". Dadurch wird sichergestellt, dass sich das Element um die obere linke Ecke dreht und an die entsprechende Position bewegt.

Hier ist ein Beispielcode:

  Picture by Name

body {
  margin: 0;
}

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

Umgekehrt, um das gedrehte Element in der oberen rechten Ecke zu positionieren, ändern Sie einfach transform-origin in „top right“ und lassen Sie TranslateX auf „-100 %“ eingestellt.

Sie können es erkunden Diese Implementierung in der bereitgestellten Fiddle: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

Denken Sie daran, die Positionierungswerte nach Bedarf anzupassen Ihren spezifischen Anforderungen entsprechen. Experimentieren Sie mit verschiedenen Transformationsursprungseinstellungen, um die gewünschte Ausrichtung und das gewünschte Layout für Ihre gedrehten Elemente zu erreichen.