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

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