CSS rotate and postion on left top 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>

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

来源：https://stackoverflow.com/questions/49096139/css-rotate-and-postion-on-left-top-corner