How Can I Align a Rotated Element to the Left Edge in CSS?

Positioning and Rotating Elements

In CSS, it is possible to rotate elements around a specific point. However, sometimes it can be challenging to accurately position the element after rotating it. This is where the transform-origin property comes into play.

Problem:

A user wants to rotate a

element with text and position it in the top left corner. While they managed to place it at the top, they faced difficulty aligning it with the left edge.

Solution:

To align the rotated element with the left edge, you need to set the transform-origin property to top left. This sets the reference point for the rotation and translation operations. Additionally, changing the translateX value to -100% will move the element's origin to the far left, effectively aligning it with the left edge.

Example:

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>

With these modifications, the rotated

element will be positioned precisely in the top left corner.

The above is the detailed content of How Can I Align a Rotated Element to the Left Edge in CSS?. For more information, please follow other related articles on the PHP Chinese website!