如何將旋轉元素放置在左上角或右上角？

將旋轉元素放置在左上角或右上角

旋轉元素時，了解變換原點的方式至關重要影響其定位。此屬性指定元素將圍繞其旋轉的點。透過調整transform-origin，可以有效控制元素旋轉後的最終位置。

要將旋轉後的元素定位在左上角，請將其transform-origin修改為“左上角”，並將translateX設為“- 100%”。這將確保元素圍繞左上角旋轉並移動到適當的位置。

下面是範例程式碼：

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

相反，定位旋轉的元素在右上角，只需將transform-origin更改為「右上角」並將translateX設定為“-100%”即可。

您可以在提供的小提琴中探索此實現：[JS Fiddle](https: //jsfiddle.net/wddwnj3t/).

請記住根據需要調整定位值以滿足您的特定要求。嘗試不同的變換原點設置，以實現旋轉元素所需的對齊和佈局。

以上是如何將旋轉元素放置在左上角或右上角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！