How to Align a Rotated Div to the Top Left or Right Corner?

How to Align a Rotated Element to the Top Left or Right Corner

Positioning a rotated element in a specific corner of a webpage can be challenging. Let's examine the scenario where you want to rotate a div containing text and align it to the top left or top right corner.

The given CSS snippet includes a div with a pink background and the text "Picture by Name." The transform attribute rotates the div 90 degrees, aligning it vertically along the left or right edge of the page depending on the desired corner placement.

To align the rotated div to the top left corner, the key step is to adjust the transform-origin and translation values. By setting transform-origin to top left, the rotation point is shifted to that corner. Additionally, the translationX value must be set to -100% to move the element to the extreme left edge.

Here is the revised CSS with the necessary modifications:

body {
  margin: 0;
}

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

This code ensures that the rotated div is aligned at the top left corner of the page. By adjusting these values accordingly, you can also align the element to the top right corner.

The above is the detailed content of How to Align a Rotated Div to the Top Left or Right Corner?. For more information, please follow other related articles on the PHP Chinese website!