How to rotate and postion an element on the top left or top right corner?

by

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

More Related Contents:

  1. ‘transform3d’ not working with position: fixed children
  2. How to keep origin in center of image in scale animation?
  3. Html/Css Triangle with pseudo elements
  4. Setting transform-origin on SVG group not working in Firefox
  5. Unskewing the ends of an assortment multiple skewed images
  6. Why does my Transform snap back?
  7. 5 images symmetrically seperated with diagonal lines
  8. Position fixed doesn’t work when using -webkit-transform
  9. How to transform each side of a shape separately?
  10. How to place elements like this
  11. Vertically align an image inside a div with responsive height
  12. Remove white space above and below large text in an inline-block element
  13. Limit scope of external css to only a specific element?
  14. How to word wrap text in HTML?
  15. How do I *really* justify a horizontal menu in HTML+CSS?
  16. How to hide elements without having them take space on the page?
  17. How can I put an input element on the same line as its label?
  18. Is inside block correct?
  19. Can we set style to title tag in header
  20. How do I disable form fields using CSS?
  21. CSS selector for empty or whitespace
  22. Possible to style the css3 resize function?
  23. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  24. How to change font-family of drop down’s list item?
  25. CSS align images and text on same line
  26. sticky position on css grid items
  27. Why is my .sticky-top class not working in Bootstrap 4?
  28. Use the HTML tag as a background image instead of the CSS background-image property?
  29. Make plus symbol in CSS
  30. Flex elements ignore percent padding in Firefox

Leave a Comment