How to Position a Rotated Element in the Top Left or Top Right Corner?

Positioning a Rotated Element in the Top Left or Top Right Corner

When rotating an element, it is crucial to understand how transform-origin affects its positioning. This property specifies the point around which the element will be rotated. By adjusting transform-origin, you can effectively control the element's final position after rotation.

To position a rotated element in the top left corner, modify its transform-origin to "top left" and set translateX to "-100%". This will ensure that the element rotates around the top left corner and moves to its appropriate position.

Here is an example code:

<div class="credit">
  Picture by Name
</div>

body {
  margin: 0;
}

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

Conversely, to position the rotated element in the top right corner, simply change transform-origin to "top right" and maintain translateX set to "-100%".

You can explore this implementation in the fiddle provided: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

Remember to adjust the positioning values as needed to suit your specific requirements. Experiment with different transform-origin settings to achieve the desired alignment and layout for your rotated elements.

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