왼쪽 위 또는 오른쪽 위 모서리에 회전된 요소를 배치하는 방법은 무엇입니까?

왼쪽 상단 또는 오른쪽 상단에 회전된 요소 배치

요소를 회전할 때 변환 원본이 어떻게 시작되는지 이해하는 것이 중요합니다. 위치에 영향을 미칩니다. 이 속성은 요소가 회전할 지점을 지정합니다. 변환 원점을 조정하면 회전 후 요소의 최종 위치를 효과적으로 제어할 수 있습니다.

회전된 요소를 왼쪽 상단에 배치하려면 변환 원점을 "왼쪽 상단"으로 수정하고 번역 X를 "-로 설정하세요. 100%". 이렇게 하면 요소가 왼쪽 상단 모서리를 중심으로 회전하여 적절한 위치로 이동합니다.

다음은 예제 코드입니다.

<div class="credit">
  Picture by Name
</div>

body {
  margin: 0;
}

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

반대로, 회전된 요소를 배치하려면 오른쪽 상단에서 변환 원본을 "오른쪽 상단"으로 변경하고 번역 X를 "-100%"로 유지하세요.

제공된 바이올린에서 이 구현을 탐색할 수 있습니다: [JS Fiddle](https: //jsfiddle.net/wddwnj3t/).

특정 요구 사항에 맞게 필요에 따라 위치 지정 값을 조정하는 것을 잊지 마세요. 회전된 요소에 대해 원하는 정렬과 레이아웃을 얻으려면 다양한 변형 원본 설정을 실험해 보세요.

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