如何在 CSS 中將旋轉元素與左邊緣對齊？

定位和旋轉元素

在 CSS 中，可以圍繞特定點旋轉元素。然而，有時在旋轉元件後準確定位元件可能具有挑戰性。這就是 transform-origin 屬性發揮作用的地方。

問題：

使用者想要旋轉

文字的元素並將其放置在左上角。雖然他們設法將其放置在頂部，但在將其與左邊緣對齊時遇到了困難。

解決方案：

要將旋轉的元素與左邊緣對齊，您需要將transform-origin 屬性設為左上角。這設定了旋轉和平移操作的參考點。此外，將 translateX 值變更為 -100% 會將元素的原點移到最左側，從而有效地將其與左邊緣對齊。

範例:

body {
  margin: 0;
}

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

<div class="credit">
  Picture by Name
</div>

透過這些修改，旋轉的

元素將精確定位在左上角。

以上是如何在 CSS 中將旋轉元素與左邊緣對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！