회전된 Div를 왼쪽 상단 또는 오른쪽 상단 모서리에 정렬하는 방법은 무엇입니까?

회전된 요소를 왼쪽 상단 또는 오른쪽 상단 모서리에 정렬하는 방법

회전된 요소를 웹페이지의 특정 모서리에 배치하는 것은 다음과 같습니다. 도전적이다. 텍스트가 포함된 div를 회전하고 왼쪽 상단 또는 오른쪽 상단에 정렬하려는 시나리오를 살펴보겠습니다.

주어진 CSS 스니펫에는 분홍색 배경의 div와 "Picture by Name. " 변환 속성은 div를 90도 회전하여 원하는 모서리 배치에 따라 페이지의 왼쪽 또는 오른쪽 가장자리를 따라 수직으로 정렬합니다.

회전된 div를 왼쪽 상단 모서리에 정렬하려면 주요 단계는 다음과 같습니다. 변환 원본 및 번역 값을 조정합니다. 변환 원점을 왼쪽 상단으로 설정하면 회전점이 해당 모서리로 이동됩니다. 또한 요소를 맨 왼쪽 가장자리로 이동하려면 TranslationX 값을 -100%로 설정해야 합니다.

다음은 필요한 수정 사항을 적용한 수정된 CSS입니다.

body {
  margin: 0;
}

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

이 코드는 다음을 보장합니다. 회전된 div가 페이지의 왼쪽 상단에 정렬되어 있는지 확인하세요. 이러한 값을 적절하게 조정하면 요소를 오른쪽 상단에 정렬할 수도 있습니다.

위 내용은 회전된 Div를 왼쪽 상단 또는 오른쪽 상단 모서리에 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!