Jeg ønsker å rotere bildet som er plassert i knappen på rullefeltet i Chrome. Nå har jeg en CSS med dette innholdet:
::-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;
}
Jeg ønsker å rotere bildet uten å rotere innholdet.
Veldig bra gjort og besvart her - 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);
}
Jeg var ute etter å gjøre dette også. Jeg har et stort flisebilde (bokstavelig talt et bilde av en flis) som jeg ønsker å rotere med bare omtrent 15 grader og få gjentatt. Du kan forestille deg størrelsen på et bilde som ville gjentas sømløst, noe som gjør 'bilderedigeringsprogrammet' svaret ubrukelig.
Løsningen min var å gi det ikke-roterte (bare én kopi :) flisebildet til et psuedo :before-element - overdimensjonere det - gjenta det - sette containerens overflow til hidden - og rotere det genererte :before-elementet ved hjelp av css3 transforms. 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); }
}
Javascript:
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS: Jeg har funnet dette et annet sted, men husker ikke kilden.