CSS旋转并位于左上角

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>