Wie lässt sich das Hintergrundbild im Container drehen?

Question

Mehr

Quelle Nicht AMP-Version Bearbeiten

Wie lässt sich das Hintergrundbild im Container drehen?

Ich möchte das Bild, das in der Schaltfläche der Bildlaufleiste in Chrome platziert ist, drehen. 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.

unor

Bearbeitete Frage 14. Februar 2015 в 12:50

Programmierung

css background-image image-rotation

23. Februar 2011 в 5:44

11 Aufrufe

Anmol Saraf · Answer 1 · 2013-03-06T15:20:43+00:00

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

Simon Seddon · Answer 2 · 2012-05-23T09:21:42+00:00

Ich war auf der Suche, dies auch zu tun. Ich habe eine große Kachel (buchstäblich ein Bild einer Kachel) Bild, das ich ' d wie um nur etwa 15 Grad drehen und haben wiederholt. Sie können sich die Größe eines Bildes vorstellen, das sich nahtlos wiederholen würde, so dass die Antwort "Bildbearbeitungsprogramm" unbrauchbar wäre.

Meine Lösung bestand darin, das nicht gedrehte (nur eine Kopie :) Kachelbild in ein psuedo :before-Element zu geben - es zu vergrößern - es zu wiederholen - den Containerüberlauf auf versteckt zu setzen - und das erzeugte :before-Element mit Hilfe von css3 transforms zu drehen. Puh!

user2129794 · Answer 3 · 2013-04-30T19:51:00+00:00

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 irgendwo anders gefunden, kann mich aber nicht mehr an die Quelle erinnern