CSS旋转并放置在左上角 [英] 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>

推荐答案

更改转换来源到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>

这篇关于CSS旋转并放置在左上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！