[css] 컨테이너에서 배경 이미지를 회전시키는 방법은 무엇입니까?

Program / 글쓴이

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

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

답변

매우 잘하고 여기에 대답-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;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

답변

매우 쉬운 방법, 한 방향으로 회전하고 다른 방법으로 내용을 회전시킵니다. 그래도 사각형이 필요합니다

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

답변

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 : 요소 앞-크기 초과-반복-컨테이너 오버플로를 숨김으로 설정하고 css3 변환을 사용하여 생성 된 요소 앞을 회전시킵니다. 보쉬!

답변

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-imagein background속성 을 사용하고 있습니다.

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

행운을 빕니다…

답변