de-vraag
더보기
Question

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

크롬에서 스크롤바 버튼에 있는 이미지를 회전시키고 싶습니다. 이제 다음과 같은 내용을 담은 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;
}

이미지를 회전시키지 않고 회전시키고 싶습니다.

unor
unor
편집된 질문14일 2월 2015 в 12:50
프로그래밍
css
background-image
image-rotation
Popular videos
« 이전
다음 »

아주 잘했고, 여기에 대답했습니다. 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);
}
130

가장 쉬운 방법, 내용, 그리고 다른 한 가지 방법은 회전시킬 수 있습니다. 네모난 표시되어도 필요합니다.

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

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

제 해결책은 회전하지 않은 타일 이미지를 psuedo :요소 전 -요소 크기 초과 - 반복 - 용기 오버플로우을 숨김으로 설정하고 css3 변환을 사용하여 생성된 :요소 전을 회전시키는 것이었습니다. 보쉬!

5

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

Javascript:

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

  return false
})

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

PS: I'이걸 다른 곳에서 발견했지만 출처를 기억하지 못합니다.

Gust van de Wal
Gust van de Wal
편집된 답변24일 11월 2018 в 10:41
5

제 경우에는 제가 회전되지 복제본에 이미지 크기 그리 큰 수는 없는 것이다. 따라서 그동안 회전되지 photoshop 과 (와) '이미지'. Photoshop 대한 대안으로 '회전' 이미지는 온라인 도구에서는 너무 대한 이미지 회전. # 39, m '작업' 에 한 번, I& 회전되지 회전되지 이미지 '배경' 재산이잖아

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

행운을 빕니다.

Online Photo rotating tool → ConvertImage
Free online Rotator tool for pivoting, rotating and straightening a photo. Change the angle and axis of an image ONLINE with this free web application.
convertimage.net
3