Wie drehe ich das Hintergrundbild im Container?

160

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.

css background-image image-rotation Priya
quelle
1
Das würde ich auch gerne machen. Es gibt ein Beispiel für so etwas in iCloud - sehen Sie, wie sich die Tresortextur
Subcreation
das sieht irgendwie nach einer Parallaxe aus. konnte nicht wirklich aus dem Code erkennen ...
Sheriffderek
Ich denke, dass Sie vielleicht nicht mehr brauchen und antworten, aber vielleicht wäre jemand anderes interessiert. Hier ist ein Link für ein Tutorial, das zeigt, wie es geht: http://www.sitepoint.com/css3-transform-background-image/
Ayoub M.
Leider funktionieren nicht alle bereitgestellten Lösungen in Bildlaufleisten. Am Ende habe ich 4 separate Bilder erstellt.
Amöbe
1
Siehe auch: Drehen eines Hintergrundbildes mit CSS3
oder

Antworten:

141

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);
}
Anmol Saraf
quelle
2
Zu Ihrer Information, Container drehen sich um ihren Mittelpunkt, falls Sie Probleme haben, genau die Transformation zu erhalten, die Sie möchten.
Nick Larsen
Zu Ihrer Information, es funktioniert nicht für alle Elemente. Zum Beispiel kann ein selectnicht haben :before.
Yann Dìnendal
1
Beachten Sie auch, dass 200% möglicherweise nicht in allen Fällen ausreichen, dh bei länglichen Elementen wie 10px × 200px.
Henrik Christensen
4
Ja, aber dies ist nicht der Hintergrund dreht. Dies täuscht es mit einer Annäherung vor. Wenn der Hintergrund tatsächlich gedreht werden muss, hilft dies nicht.
dev_willis
22

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);
}
Martijn
quelle
1
Dank bro! Die einfachsten Antworten sind normalerweise die besten
Merunas Grincalaitis
7

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

user2129794
quelle
5

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!

Simon Seddon
quelle
Ich kann mir nicht vorstellen, dass die Größe eines Bildes, das sich nahtlos wiederholen würde, sehr groß ist ...
Sheriffderek
1
Was ist, wenn Sie möchten, dass Ihr Basishintergrundbild gekippt wird?
Jason
4

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>
Erweitern Sie das Snippet

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...

Akash
quelle