How to rotate and postion an element on the top left or top right 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>Change the transform-origin to top left and make the translation -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>And the other direction:
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>Here is for all the corners:
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>More cases can be found here: https://dev.to/afif/how-to-correctly-position-rotated-text-using-css-1gjc