Home >Web Front-end >CSS Tutorial >How Can I Align a Rotated Element to the Left Edge in CSS?

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

Susan SarandonOriginal: 2024-11-10 00:40:02612browse

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!

css edge for while Property this position transform

Statement：

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

Previous article：How to Wrap Text in a Table Data Cell (Next article：How to Wrap Text in a Table Data Cell (

See more

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

Related articles