CSS rotate and postion on left top Corner

Question

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>

Answer 1

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>