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);
}
저도 이 방법을 찾고 있었습니다. 큰 타일(말 그대로 타일의 이미지) 이미지를 약 15도 정도만 회전시켜 반복하고 싶습니다. 이미지의 크기가 너무 커서 이미지 편집 프로그램이 무용지물이 될 수 있다는 것을 상상할 수 있습니다.
제 해결책은 회전되지 않은(복사본 하나만 :) 타일 이미지를 psuedo :before 요소에 제공하고 - 크기를 확대하고 - 반복하고 - 컨테이너 오버플로를 숨김으로 설정하고 - 생성된 :before 요소를 css3 변환을 사용하여 회전하는 것이었습니다. Bosh!
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")
})
추신: 다른 곳에서 찾았지만 출처가 기억나지 않습니다.
제 경우에는 제가 회전되지 복제본에 이미지 크기 그리 큰 수는 없는 것이다. 따라서 그동안 회전되지 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;
}
행운을 빕니다.