如何旋转元素并将其放置在左上角或右上角？

Question

我用文本旋转了一个 div 并想将其放置在左上角。 我设法将其放置在顶部，但无法使其与左边缘对齐。我该怎么做？

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

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

Answer 1

将 transform-origin 更改为

top left

并进行翻译

-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>

另一个方向：

body {
 margin:0;
}

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

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

这是所有角落：

body {
 margin:0;
}

.credit {
  position: absolute;
  background-color: pink;
  padding:5px;
  font-weight:bold;
}
.credit.top-right {
  transform-origin: top right;
  right:0;
  top:0;
  transform: rotate(-90deg) translateY(-100%);
  /* OR transform: rotate(90deg) translateX(100%) */
}

.credit.top-left {
  transform-origin: top left;
  left:0;
  top:0;
  transform: rotate(-90deg) translateX(-100%);
  /* OR transform: rotate(90deg) translateY(-100%) */
}

.credit.bottom-right {
  transform-origin:bottom right;
  right:0;
  bottom:0;
  transform: rotate(-90deg) translateX(100%);
  /* OR transform: rotate(90deg) translateY(100%) */
}

.credit.bottom-left {
  transform-origin:bottom left;
  left:0;
  bottom:0;
  transform: rotate(-90deg) translateY(100%);
  /* OR transform: rotate(90deg) translateX(-100%) */
}

<div class="credit top-right">
  Picture
</div>

<div class="credit top-left">
  Picture
</div>

<div class="credit bottom-right">
  Picture
</div>

<div class="credit bottom-left">
  Picture
</div>

更多案例可以在我的文章中找到：https://dev.to/afif/how-to- Correctly-position-rotated-text-using-css-1gjc