我旋转了一个带有文本的 div 并想将它放在左上角。 我设法将它放在顶部,但无法使其与左边缘对齐。我该怎么做?
.credit {
position: absolute;
background-color: pink;
transform: rotate(-90deg) translateX(-50%);
}
<div class="credit">
Picture by Name
</div>
最佳答案
更改 transform-origin到左上角
并进行翻译-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>
这里是所有的 Angular 落:
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
关于html - 如何在左上角或右上角旋转和定位元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50331549/