本文介绍了如何旋转和放置元素在左上角或右上角?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用文本"和想要将其放在左上方.我设法将其放置在顶部,但无法使其与左边缘对齐.我该怎么做?

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>

推荐答案

更改转换来源左上,并进行翻译 -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>

这篇关于如何旋转和放置元素在左上角或右上角?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-31 14:42