How Can I Align a Rotated Element to the Left Edge in CSS?-CSS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-11-10 00:40:02

Original

618 people have browsed it

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>

Copy after login

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!

source：php.cn

Previous article：How to Wrap Text in a Table Data Cell ( Next article：Does `!important` Really Hurt Performance?

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