Ich möchte das Bild drehen, das in der Schaltfläche der Bildlaufleiste in Chrome platziert ist. Jetzt habe ich ein CSS mit diesem Inhalt:

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

Ich möchte das Bild drehen, ohne seinen Inhalt zu drehen.

Sehr gut gemacht und hier beantwortet - 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);
}

Sehr einfache Methode, Sie drehen in die eine Richtung und den Inhalt in die andere. Benötigt allerdings ein Quadrat

#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: Ich habe das woanders gefunden, erinnere mich aber nicht an die Quelle

Ich wollte das auch. Ich habe ein großes Kachelbild (buchstäblich ein Bild einer Kachel), das ich nur um ungefähr 15 Grad drehen möchte und das ich wiederholt habe. Sie können sich die Größe eines Bildes vorstellen, die sich nahtlos wiederholen würde und die Antwort des Bildbearbeitungsprogramms unbrauchbar macht.

Meine Lösung bestand darin, das nicht gedrehte (nur eine Kopie :) Kachelbild an pseudo: before element zu übergeben - es zu überdimensionieren - es zu wiederholen - den Containerüberlauf auf versteckt zu setzen - und das generierte: before-Element mithilfe von css3-Transformationen zu drehen. Bosh!

Update 2020, Mai:

Einstellen position: absoluteund dann transform: rotate(45deg)einen Hintergrund liefern:

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>

Ursprüngliche Antwort:

In meinem Fall ist die Bildgröße nicht so groß, dass ich keine gedrehte Kopie davon haben kann. Das Bild wurde also mit gedreht photoshop. Eine Alternative zum photoshopDrehen von Bildern ist auch das Online-Tool zum Drehen von Bildern . Einmal gedreht, arbeite ich mit dem rotated-imagein der backgroundEigenschaft.

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

Viel Glück...