How can I rotate a div with text and align it to the top left corner?

Aligning a Rotated Element to the Top Left or Top Right Corner

In this query, a user encountered a challenge in rotating a div containing text and aligning it to the top left edge. The provided snippet demonstrates the rotation achieved using transform: rotate(-90deg) translateX(-50%).

The solution lies in adjusting the transform-origin to top left, which specifies where the rotation should originate from. Additionally, modifying the translation to translateX(-100%) ensures that the div is positioned 100% to the left of its origin.

Here's the updated code snippet:

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

By implementing these changes, the div will be rotated at the top left corner, effectively aligning it to both the top and left edges of its parent container.

The above is the detailed content of How can I rotate a div with text and align it to the top left corner?. For more information, please follow other related articles on the PHP Chinese website!