webentwicklung-frage-antwort-db.com.de

Wie drehe ich das Hintergrundbild im Container?

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 den Inhalt zu drehen.

139
priya

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);
}
131
Anmol Saraf

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

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

Das wollte ich auch. Ich habe ein großes Kachelbild (im wahrsten Sinne des Wortes ein Bild einer Kachel), das ich gerne um nur ungefähr 15 Grad drehen würde und wiederholt habe. Sie können sich die Größe eines Bildes vorstellen, das sich nahtlos wiederholen würde, wodurch die Antwort "Bildbearbeitungsprogramm" unbrauchbar wird.

Meine Lösung bestand darin, das nicht gedrehte (nur eine Kopie :) Kachelbild zu psuedo: before element - Übergröße - Wiederholung - Containerüberlauf auf hidden zu setzen - und das generierte: before element mit css3-Transformationen zu drehen. Bosh!

5
Simon Seddon

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

4
user2129794

In meinem Fall ist das Bild nicht so groß, dass ich keine gedrehte Kopie davon haben kann. Das Bild wurde also mit photoshop gedreht. Eine Alternative zu photoshop zum Drehen von Bildern ist Online-Tool auch zum Drehen von Bildern . Einmal gedreht, arbeite ich mit dem rotated-image in der Eigenschaft background.

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

Viel Glück...

3
Akash