How to rotate and postion an element on the top left or top right corner?

I rotated a div with Text & wanted to Place it on the left top. I managed to place it at the top, but I can't get it working to align with the left edge. How do I do this?

.credit {
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-50%);
}
<div class="credit">
  Picture by Name
</div>

Change the transform-origin to top left and make the translation -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>

And the other direction:

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>

Here is for all the corners:

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>

More cases can be found here: https://dev.to/afif/how-to-correctly-position-rotated-text-using-css-1gjc