Eu quero girar a imagem que é colocada no botão da barra de rolagem no Chrome. Agora eu tenho um CSS com este conteúdo:

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

Desejo rodar a imagem sem rodar o seu conteúdo.

Muito bem feito e respondido aqui - 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);
}

Método muito fácil, você gira para um lado e o conteúdo para o outro. Requer um quadrado

#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: Eu encontrei isso em outro lugar, mas não me lembro da fonte

Eu estava olhando para fazer isso também. Eu tenho uma imagem grande de bloco (literalmente uma imagem de um bloco) que gostaria de girar cerca de 15 graus e repeti. Você pode imaginar o tamanho de uma imagem que se repetiria perfeitamente, tornando inútil a resposta do 'programa de edição de imagens'.

Minha solução foi atribuir a imagem não rotacionada (apenas uma cópia :) ao psuedo: elemento anterior - sobredimensionar - repetir - definir o estouro do contêiner como oculto - e girar o elemento gerado: antes usando transformações css3. Bosh!

Atualização 2020, maio:

Definir position: absolutee, em seguida transform: rotate(45deg), fornecerá um plano de fundo:

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>

Resposta original:

No meu caso, o tamanho da imagem não é tão grande que não possa ter uma cópia rotacionada. Então, a imagem foi girada com photoshop. Uma alternativa photoshoppara girar imagens é a ferramenta on - line também para girar imagens . Uma vez rotacionado, estou trabalhando com o rotated-imagena backgroundpropriedade.

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

Boa sorte...