컨테이너에서 배경 이미지를 회전하는 방법은 무엇입니까?

컨테이너에서 배경 이미지를 회전하는 방법은 무엇입니까?

크롬에 있는 스크롤 바의 버튼에 있는 이미지를 회전하고 싶습니다.이제 다음 내용이 포함된 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;
}

저는 이미지 내용물을 회전시키지 않고 회전하고 싶습니다.

아주 잘했고 여기에 답이 왔습니다 – http://www.sitepoint.com/css3-transform-background-image/

#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);
}

매우 쉬운 방법으로 한 방향으로 회전하고 내용물은 다른 방향으로 회전합니다.사각형이 필요합니다.

#element{
    background : url('someImage.jpg');
}
#element:hover{
    transform: rotate(-30deg);
}
#element:hover >*{
    transform: rotate(30deg);
}

업데이트 2020, 5월:

세팅position: absolute그리고 나서.transform: rotate(45deg)배경을 제공합니다.

div {
  height: 200px;
  width: 200px;
  outline: 2px dashed slateBlue;
  overflow: hidden;
}
div img {
  position: absolute;
  transform: rotate(45deg);
  z-index: -1;
  top: 40px;
  left: 40px;
}

<div>
  <img src="https://placekitten.com/120/120" />
  <h1>Hello World!</h1>
</div>

원래 답변:

저 같은 경우는 이미지 크기가 너무 크지 않아서 회전 복사가 불가능합니다.그래서 이미지는 로 회전이 되었습니다.photoshop. 의 대안.photoshop회전하는 영상의 경우 온라인 도구로 회전하는 영상을 회전하는 경우도 마찬가지입니다.회전이 끝나면, 저는 그와 함께 일을 하고 있습니다.rotated-image에서background소유물.

div.with-background {
    background-image: url(/img/rotated-image.png);
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: top center;
}

행운을...

CSS:

.reverse {
  transform: rotate(180deg);
}

.rotate {
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-name: yoyo;
  animation-timing-function: linear;
}

@keyframes yoyo {
  from { transform: rotate(  0deg); }
  to   { transform: rotate(360deg); }
}

자바스크립트:

$(buttonElement).click(function () {
  $(".arrow").toggleClass("reverse")

  return false
})

$(buttonElement).hover(function () {
  $(".arrow").addClass("rotate")
}, function() {
  $(".arrow").removeClass("rotate")
})

추신: 다른 곳에서 찾았는데 출처가 기억이 안 나요.

저도 이것을 하려고 했습니다.15도 정도만 돌려보고 싶은 큰 타일(말 그대로 타일 이미지) 이미지가 있습니다.이미지의 크기가 매끄럽게 반복되어 '이미지 편집 프로그램'의 답이 쓸모 없게 되는 것을 상상할 수 있습니다.

내 해결책은 회전되지 않은 (단 한 개의 복사본 :) 타일 이미지를 psuedo :before 요소 -oversize it - repeat - 컨테이너 오버플로를 hidden으로 설정 - css3 변환을 사용하여 생성된 :before 요소를 회전시키는 것이었습니다.이런!

모든 해결책을 시도했지만 아무 도움이 되지 않았습니다. 아래는 제 문제와 해결 방법입니다.

문제: 가로 방향이 같은 데스크톱용 이미지가 있지만 모바일 화면용으로 회전(세로 방향)된 이미지를 표시하는 것입니다.

방법: 자산 폴더의 실제 이미지를 원하는 대로 회전시킨 다음 미디어 쿼리를 사용하여 모바일 배경에 대한 이미지를 호출했습니다.

(이것이 제가 했던 가장 쉽고 빠른 해결책이었습니다.)

이미지만을 위한 디브를 만들어보고 그것을 뒤집기를 시도합니다.transform: scaleY(-1);아니면transform: scaleX(-1);navbar를 이미지 앞에 두고 싶다면 중복 div를 만들어 불투명도 속성을 0으로 설정할 수 있습니다.

2021년 12월 업데이트

원래 질문은 "...배경 이미지를 회전하세요..." 입니다.

가장 좋은 답은 https://stackoverflow.com/a/62135576/3446280 입니다.

언급URL : https://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container