如何在左上角或右上角旋转和定位元素？答案

【问题标题】：How to rotate and postion an element on the top left or top right corner?如何在左上角或右上角旋转和定位元素？
【发布时间】：2018-08-12 06:18:37
【问题描述】：

我用 Text 旋转了一个 div，想把它放在左上角。我设法将它放在顶部，但我无法让它与左边缘对齐。我该怎么做？

.credit {
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-50%);
}

<div class="credit">
  Picture by Name
</div>

【问题讨论】：

标签： html css css-transforms

【解决方案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>

还有另一个方向：

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>

这里是所有角落：

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>

更多案例可以在这里找到：https://dev.to/afif/how-to-correctly-position-rotated-text-using-css-1gjc

【讨论】：