将旋转元素定位在左上角或右上角

旋转元素时，了解变换原点的方式至关重要影响其定位。该属性指定元素将围绕其旋转的点。通过调整transform-origin，可以有效控制元素旋转后的最终位置。

要将旋转后的元素定位在左上角，请将其transform-origin修改为“左上角”，并将translateX设置为“- 100%”。这将确保元素围绕左上角旋转并移动到适当的位置。

下面是示例代码：

  Picture by Name

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/).

记住根据需要调整定位值适合您的具体要求。尝试不同的变换原点设置，以实现旋转元素所需的对齐和布局。