버튼 자체를 회전하지 않고 CSS 스크롤 막대 버튼 내에서 이미지를 회전하려면 어떻게 해야 합니까?

CSS 스크롤바에서 배경 이미지 회전: 회전 수수께끼 해결

질문:

In Chrome 스크롤바 버튼 내에서 이미지를 회전하려고 시도하는 중에 개발자가 문제에 직면했습니다. -webkit-transform 속성이 콘텐츠를 포함하여 전체 버튼을 성공적으로 회전하는 동안 이미지만 회전하는 솔루션을 찾았습니다.

답변:

해결책은 다음과 같습니다. 원래 요소 내부에 추가 요소를 생성하는 의사 요소 :before를 활용합니다. 의사 요소를 절대적으로 배치하고 크기를 정의하고 상위 요소를 기준으로 배치하면 별도의 "레이어"가 됩니다.

CSS 코드 조각:

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

여기서 코드 조각에서 배경 이미지는 의사 요소 내에 설정되고 변환 속성을 사용하여 회전됩니다. Z-인덱스는 이미지 레이어가 기본 요소의 콘텐츠 뒤에 있도록 보장합니다. 위쪽 및 왼쪽 속성을 조정하면 요소 내에서 이미지를 배치하여 원하는 중심을 기준으로 회전할 수 있습니다.

위 내용은 버튼 자체를 회전하지 않고 CSS 스크롤 막대 버튼 내에서 이미지를 회전하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!