Wie kann ich ein Div mit Text drehen und an der oberen linken Ecke ausrichten?

Ausrichten eines gedrehten Elements an der oberen linken oder oberen rechten Ecke

Bei dieser Abfrage stieß ein Benutzer auf eine Herausforderung beim Drehen eines Div, das enthält Text und richten Sie ihn am oberen linken Rand aus. Das bereitgestellte Snippet demonstriert die Drehung, die mit der Transformation erreicht wird: rotation(-90deg) translatorX(-50%).

Die Lösung besteht darin, den Transformationsursprung nach links oben anzupassen, was angibt, woher die Drehung kommen soll. Darüber hinaus stellt die Änderung der Übersetzung in „translateX(-100 %)“ sicher, dass das Div 100 % links von seinem Ursprung positioniert ist.

Hier ist das aktualisierte Code-Snippet:

body {
  margin: 0;
}

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

Durch Implementierung Durch diese Änderungen wird das Div in der oberen linken Ecke gedreht, wodurch es effektiv sowohl am oberen als auch am linken Rand seines übergeordneten Containers ausgerichtet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div mit Text drehen und an der oberen linken Ecke ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!