Home > Web Front-end > CSS Tutorial > How to Position a Rotated Element in the Top Left or Top Right Corner?

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

Mary-Kate Olsen
Release: 2024-11-09 19:45:03
Original
646 people have browsed it

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>
Copy after login
body {
  margin: 0;
}

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template