콘텐츠에 영향을 주지 않고 컨테이너의 배경 이미지를 회전하려면 어떻게 해야 합니까?

컨테이너에서 배경 이미지 회전

이 질문에서 사용자는 Chrome 스크롤바 하단에 있는 배경 이미지를 회전하려고 하지만 이미지만 회전합니다. , 내용이 아닙니다.

제공된 CSS:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}

영향을 주지 않고 원하는 회전을 달성하려면 내용에 따라 2단계 접근 방식을 제안합니다. 먼저 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);
}

이렇게 하면 전체 컨테이너에 걸쳐 원하는 각도만큼 회전되는 투명한 의사 요소가 생성됩니다. 그런 다음 컨테이너의 콘텐츠가 회전된 의사 요소 위에 배치됩니다.

참조 리소스에서 제안한 대로 이 기술을 사용하면 콘텐츠를 왜곡하지 않고 배경 이미지를 회전할 수 있습니다.

위 내용은 콘텐츠에 영향을 주지 않고 컨테이너의 배경 이미지를 회전하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!