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

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

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

다음은 예제 코드입니다.

  Picture by Name

body {
  margin: 0;
}

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

반대로, 회전된 요소를 오른쪽 상단에 배치하려면 변환 원본을 "오른쪽 상단"으로 변경하고 TranslateX를 "-100%"로 설정된 상태로 유지하면 됩니다.

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

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