왼쪽 위 또는 오른쪽 위 모서리에 요소를 회전하고 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-11-10 19:13:02

원래의

562명이 탐색했습니다.

How to Rotate and Position an Element on the Top Left or Top Right Corner?

왼쪽 상단 또는 오른쪽 상단 모서리에 요소 회전 및 위치 지정

텍스트가 있는 div를 회전하고 왼쪽 상단에 배치하려면 코너에서는 다음 코드를 사용할 수 있습니다.

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

로그인 후 복사

여기서는 변환 원본 속성이 top으로 설정되어 있습니다. left는 왼쪽 상단 모서리를 기준으로 회전을 발생시킵니다. TranslateX(-100%) 변환은 회전된 요소를 너비의 100%만큼 왼쪽으로 이동합니다.

요소를 오른쪽 가장자리에 정렬하려면 변환X 값을 양수로 수정할 수 있습니다(예:translateX) (100%). 이렇게 하면 회전된 요소가 너비의 100%만큼 오른쪽으로 이동합니다.

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

로그인 후 복사

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