CSS에서 컨테이너를 회전할 때 배경 이미지 위치를 고정된 상태로 유지하는 방법은 무엇입니까?

컨테이너 회전 중 이미지 위치 유지

웹 개발에서 콘텐츠에 영향을 주지 않고 컨테이너 배경 이미지를 회전하는 것은 어려운 작업일 수 있습니다. 컨테이너에 변환 회전을 적용할 때 이미지 콘텐츠가 그에 맞는 경우가 많습니다. 이 문제를 해결하기 위해 이미지 콘텐츠를 원래 위치에 유지하는 솔루션을 살펴보겠습니다.

CSS 변환을 사용한 배경 이미지 회전

이미지의 배경 이미지를 회전하려고 시도하는 다음 CSS를 고려해 보세요. 수직 스크롤바 감소 버튼:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    ...
}

안타깝게도 이 접근 방식은 이미지와 콘텐츠를 모두 회전시킵니다. 이를 방지하려면 아래에 링크된 포괄적인 솔루션을 참조하세요:

• [http://www.sitepoint.com/css3-transform-Background-image/](http://www .sitepoint.com/css3-transform-Background-image/)

해결책: 반전된 의사 요소 회전

제공된 솔루션은 의사 요소를 사용하여 가상 이미지 레이어를 생성하고 여기에 역회전을 적용합니다.

#myelement:before {
    content: "";
    ...
    background: url(background.png) 0 0 repeat;
    transform: rotate(-30deg);
}

이 방법은 본질적으로 컨테이너의 회전을 오프셋하여 이미지 콘텐츠가 제자리에 있습니다. 특정 디자인에 대해 원하는 결과를 얻으려면 회전 각도 및 기타 값을 조정해야 할 수도 있습니다.

위 내용은 CSS에서 컨테이너를 회전할 때 배경 이미지 위치를 고정된 상태로 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!