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

Vorrei 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. Richiede un quadrato però

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

Javascript:

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

  return false
})

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

PS: L'ho trovato da qualche altra parte ma non ricordo la fonte

Stavo cercando di fare anche questo. Ho una grande piastrella (letteralmente un'immagine di una piastrella) che vorrei ruotare di circa 15 gradi e che ho ripetuto. Puoi immaginare la dimensione di un'immagine che si ripeterebbe senza soluzione di continuità, rendendo inutile la risposta al "programma di modifica delle immagini".

La mia soluzione è stata quella di dare l'immagine psyo non ruotata (solo una copia :) a psuedo: prima dell'elemento - sovradimensionarlo - ripeterlo - impostare l'overflow del contenitore su nascosto - e ruotare l'elemento generato: before usando le trasformazioni css3. Bosh!

Aggiornamento 2020, maggio:

Impostazione position: absolutee quindi transform: rotate(45deg)fornirà uno sfondo:

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>

Risposta originale:

Nel mio caso, la dimensione dell'immagine non è così grande che non posso averne una copia ruotata. Quindi, l'immagine è stata ruotata con photoshop. Un'alternativa alle photoshopimmagini rotanti è lo strumento online anche per le immagini rotanti . Una volta ruotato, sto lavorando con rotated-imagela backgroundproprietà.

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

In bocca al lupo...