Come ruotare l’immagine di sfondo nel contenitore?

Voglio ruotare l’immagine che si trova nel pulsante della barra di scorrimento in Chrome. Ora ho un CSS con questo contenuto:

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

Desidero ruotare l’immagine senza ruotarne il contenuto.

    Molto ben fatto e risposto qui – 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); } 

    Metodo molto semplice, si ruota in un modo e il contenuto nell’altro. Però richiede un quadrato

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

    Stavo cercando di fare anche questo. Ho un’immagine di una tessera grande (letteralmente un’immagine di una tessera) che vorrei ruotare di circa 15 gradi e che ho ripetuto. Puoi immaginare la dimensione di un’immagine che si ripeterà senza problemi, rendendo inutile il ‘programma di modifica delle immagini’.

    La mia soluzione è stata dare l’immagine non ruotata (solo una copia 🙂 tile a psuedo: before element – oversize – repeat it – imposta l’overflow del contenitore su hidden – e ruota il generato: before element usando le trasformazioni css3. Bosh!

    CSS:

     .reverse { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); } .rotate { -webkit-animation-duration:.5s; -moz-animation-duration:.5s; -webkit-animation-iteration-count:1; -moz-animation-iteration-count:1; -webkit-animation-name: yoyo; -moz-animation-name: yoyo; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; } @-webkit-keyframes yoyo { from {-webkit-transform:scale(1) rotate(0deg);} to {-webkit-transform:scale(1) rotate(360deg);} } @-moz-keyframes yoyo { from {-moz-transform:scale(1) rotate(0deg);} to {-moz-transform:scale(1) rotate(360deg);} } 

    Javascript:

     $(buttonElement).click(function() { $('head').hide(); $(".arrow").toggleClass("reverse"); $(".tsp_panel").toggle("slow"); $(this).toggleClass("active"); return false; }); //------------------- $(buttonElement).hover(function(){ $(".arrow").addClass("rotate"); $(".arrow").stop().animate({top: '400px'}, {duration:1000, easing: 'easeOutBack'}); }, function() { $(".arrow").removeClass("rotate"); $(".arrow").stop().animate({top: "47px"}, {duration:600, easing: 'easeInOutExpo'} ); }); 

    PS: ho usato questo ma non ricordo la fonte