本文介绍了如何旋转和放置元素在左上角或右上角?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用文本"和想要将其放在左上方.我设法将其放置在顶部,但无法使其与左边缘对齐.我该怎么做?
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>
这篇关于如何旋转和放置元素在左上角或右上角?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!