Wie positioniere ich ein gedrehtes Element in der oberen linken oder oberen rechten Ecke?

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:

<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%);
}

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

Sie können diese Implementierung im erkunden fiddle bereitgestellt: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

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

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein gedrehtes Element in der oberen linken oder oberen rechten Ecke?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!