如何在 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中文网其他相关文章！