CSS에서 회전된 요소를 왼쪽 가장자리에 정렬하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

CSS에서 회전된 요소를 왼쪽 가장자리에 정렬하려면 어떻게 해야 합니까?

Susan Sarandon

풀어 주다： 2024-11-10 00:40:02

원래의

611명이 탐색했습니다.

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

요소 위치 지정 및 회전

CSS에서는 특정 지점을 중심으로 요소를 회전할 수 있습니다. 그러나 때로는 요소를 회전시킨 후 요소의 위치를 정확하게 지정하는 것이 어려울 수 있습니다. 여기서 transform-origin 속성이 작동합니다.

문제:

사용자가

텍스트가 있는 요소를 왼쪽 상단에 배치합니다. 상단에 배치하는 데 성공했지만 왼쪽 가장자리에 정렬하는 데 어려움을 겪었습니다.

해결책:

회전된 요소를 왼쪽 가장자리에 정렬하려면, transform-origin 속성을 왼쪽 상단으로 설정해야 합니다. 이는 회전 및 변환 작업에 대한 참조점을 설정합니다. 또한 translateX 값을 -100%로 변경하면 요소의 원점이 맨 왼쪽으로 이동하여 효과적으로 왼쪽 가장자리에 정렬됩니다.

예 :

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>

로그인 후 복사

이러한 수정으로 회전된

요소는 정확하게 왼쪽 상단에 배치됩니다.

위 내용은 CSS에서 회전된 요소를 왼쪽 가장자리에 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：테이블 데이터 셀에서 텍스트를 줄바꿈하는 방법( 다음 기사：`!important`가 실제로 성능에 해를 끼치나요?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2044

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?