>웹 프론트엔드 >CSS 튜토리얼 >텍스트가 있는 div를 회전하고 왼쪽 상단에 정렬하려면 어떻게 해야 합니까?

텍스트가 있는 div를 회전하고 왼쪽 상단에 정렬하려면 어떻게 해야 합니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-06 16:14:02896검색

How can I rotate a div with text and align it to the top left corner?

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

이 쿼리에서 사용자는 다음을 포함하는 div를 회전하는 데 문제가 발생했습니다. 텍스트를 왼쪽 상단 가장자리에 정렬합니다. 제공된 스니펫은 변환:rotate(-90deg)translateX(-50%)을 사용하여 달성된 회전을 보여줍니다.

해결책은 변환 원점을 왼쪽 상단으로 조정하여 회전이 시작되어야 하는 위치를 지정하는 것입니다. 또한 번역을 TranslateX(-100%)로 수정하면 div가 원점 왼쪽 100%에 배치됩니다.

업데이트된 코드 조각은 다음과 같습니다.

구현하여 이러한 변경으로 인해 div는 왼쪽 상단에서 회전되어 상위 컨테이너의 상단 및 왼쪽 가장자리에 효과적으로 정렬됩니다.

위 내용은 텍스트가 있는 div를 회전하고 왼쪽 상단에 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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