Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder

CSS-Transformationen sind zwar cool, wurden aber noch nicht auf Hintergrundbilder angewendet. Dieser Beitrag bietet eine gute Problemumgehung für den Fall, dass Sie ein Hintergrundbild unbedingt drehen oder das Hintergrundbild beim Drehen des Containerelements konstant halten möchten.

Verwenden Sie CSS3-Transformationseigenschaften, um beliebige Elemente zu skalieren, zu verzerren und zu drehen. Es wird in allen modernen Browsern ohne Herstellerpräfixe unterstützt. (Ich habe -webkit- hinzugefügt, falls Sie einige ältere Browser unterstützen möchten.)

#meinElement {
-webkit-transform: drehen (30 Grad);
transformieren: drehen (30 Grad);
}

Tolles Zeug. Allerdings wird dadurch das gesamte Element gedreht – sein Inhalt, seine Ränder und sein Hintergrundbild. Was ist, wenn Sie nur das Hintergrundbild drehen möchten? Oder wenn Sie möchten, dass der Hintergrund konstant bleibt, wenn sich das Element dreht

Derzeit gibt es keine W3C-Empfehlung für Hintergrundbildübergänge. Das wäre sehr nützlich und ich gehe daher davon aus, dass es irgendwann eines geben wird. Allerdings wird es Entwicklern, die heute einen ähnlichen Effekt verwenden möchten, nicht helfen.

Glücklicherweise gibt es eine Lösung. Im Wesentlichen handelt es sich dabei um einen Hack, um das Hintergrundbild auf das Pseudoelement davor oder danach und nicht auf den übergeordneten Container anzuwenden. Die Pseudoelemente können dann unabhängig voneinander transformiert werden.

Konvertieren Sie nur den Hintergrund

Auf das Containerelement können beliebige Stile angewendet werden, es muss jedoch auf position:relative gesetzt werden, da unser Pseudoelement innerhalb dieses Elements positioniert wird. Sie sollten auch „overflow:hidden“ festlegen, es sei denn, Sie möchten, dass der Hintergrund außerhalb des Containers überläuft.

#meinElement {
Position: relativ;
Überlauf: versteckt;
}

Wir können jetzt ein absolut positioniertes Pseudoelement mit einem Übergangshintergrund erstellen. Der Z-Index wird auf -1 gesetzt, um sicherzustellen, dass er unterhalb des Containerinhalts angezeigt wird.

#meinelement:vor {
Inhalt: "";
Position: absolut;
Breite: 200 %;
Höhe: 200%;
oben: -50%;
links: -50%;
z-Index: -1;
Hintergrund: URL (Hintergrund.png) 0 0 wiederholen;
-webkit-transform: drehen (30 Grad);
transformieren: drehen (30 Grad);
}

Beachten Sie, dass Sie möglicherweise die Breite, Höhe und Position des Pseudoelements anpassen müssen. Wenn Sie beispielsweise ein sich wiederholendes Bild verwenden, muss der gedrehte Bereich größer als sein Container sein, um den Hintergrund vollständig abzudecken:

Fester Hintergrund für Übergangselement

Fester Hintergrund transformierter Elemente. Alle Transformationen des übergeordneten Containers werden auf das Pseudoelement angewendet. Daher müssen wir diese Transformation rückgängig machen. Wenn der Container beispielsweise um 30 Grad gedreht wird, müssen wir den Hintergrund um -30 Grad drehen, um zur festen Position zurückzukehren:

#meinElement {
Position: relativ;
Überlauf: versteckt;
-webkit-transform: drehen (30 Grad);
transformieren: drehen (30 Grad);
}
#meinelement:vor {
Inhalt: "";
Position: absolut;
Breite: 200 %;
Höhe: 200%;
oben: -50%;
links: -50%;
z-Index: -1;
Hintergrund: URL (Hintergrund.png) 0 0 wiederholen;
-webkit-transform: drehen(-30 Grad);
transformieren: drehen (-30 Grad);

Auch hier müssen Sie Größe und Position anpassen, um sicherzustellen, dass der Hintergrund den übergeordneten Container ausreichend abdeckt.

Der Effekt funktioniert in allen gängigen Browsern und wird sowohl in Edge als auch in Internet Explorer auf Version 9 zurückgesetzt. IE8 zeigt keinen Übergang, aber weiterhin den Hintergrund.

Zusammenfassen

Oben ist die Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder, die ich Ihnen vorgestellt habe. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!