Wie richtet man ein gedrehtes Div an der oberen linken oder rechten Ecke aus?

So richten Sie ein gedrehtes Element an der oberen linken oder rechten Ecke aus

Die Positionierung eines gedrehten Elements in einer bestimmten Ecke einer Webseite kann sein herausfordernd. Sehen wir uns das Szenario an, in dem Sie ein Div mit Text drehen und an der oberen linken oder oberen rechten Ecke ausrichten möchten.

Das angegebene CSS-Snippet enthält ein Div mit rosa Hintergrund und den Text „Picture by Name“. " Das Transformationsattribut dreht das Div um 90 Grad und richtet es je nach gewünschter Eckplatzierung vertikal am linken oder rechten Rand der Seite aus.

Um das gedrehte Div an der oberen linken Ecke auszurichten, ist der wichtigste Schritt: Passen Sie die Transformationsursprungs- und Übersetzungswerte an. Indem Sie transform-origin auf oben links setzen, wird der Rotationspunkt in diese Ecke verschoben. Zusätzlich muss der translationX-Wert auf -100 % gesetzt werden, um das Element an den äußersten linken Rand zu verschieben.

Hier ist das überarbeitete CSS mit den notwendigen Änderungen:

body {
  margin: 0;
}

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

Dieser Code sorgt dafür dass das gedrehte Div an der oberen linken Ecke der Seite ausgerichtet ist. Indem Sie diese Werte entsprechend anpassen, können Sie das Element auch an der oberen rechten Ecke ausrichten.

Das obige ist der detaillierte Inhalt vonWie richtet man ein gedrehtes Div an der oberen linken oder rechten Ecke aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!