Heim  >  Artikel  >  Web-Frontend  >  Wie richtet man ein gedrehtes Div an der oberen linken oder rechten Ecke aus?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-07 10:03:03953Durchsuche

How to Align a Rotated Div to the Top Left or Right Corner?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn