如何旋转带有文本的 div 并将其与左上角对齐？

将旋转元素与左上角或右上角对齐

在此查询中，用户在旋转包含以下内容的 div 时遇到了挑战文本并将其与左上角对齐。提供的代码片段演示了使用transform实现的旋转：rotate（-90deg）translateX（-50％）。

解决方案在于将transform-origin调整到左上角，它指定旋转应该从哪里开始。此外，将翻译修改为 translateX(-100%) 可确保 div 位于其原点左侧 100%。

以下是更新的代码片段：

body {
  margin: 0;
}

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

通过实现这些更改后，div 将在左上角旋转，从而有效地将其与其父容器的上边缘和左边缘对齐。

以上是如何旋转带有文本的 div 并将其与左上角对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！