Wie mehrere Hintergrundbilder hinzufügen und Drehen von Objekten mit CSS3

Mit CSS3, können Sie einfach so viele Hintergrundbilder zu einem Element hinzufügen, wie Sie bitte. Sie können Bilder auch drehen. Die Abbildung zeigt ein Beispiel eines Behälters mit drei Hintergrundbilder, ein Muster, und zwei PNG-Dateien mit Transparenz.

Der einfachste Weg, um mehrere Bilder hinzuzufügen, ist jeweils durch ein Komma zu trennen, um sicherzustellen, das Bild, das Sie zunächst in der obersten Position sein wollen, zu platzieren und alle Bilder, darunter in der gewünschten Stapelreihenfolge:

.Box {/ * Ausweich * / background: url (bg-full.png) nach oben no-repeat links - / * moderne Browser * / background: url (bg-top.png) nach oben no-repeat links, url (bg-bottom .png) unten rechts no-repeat, url (bg-middle.png) links wiederholen-x-}

Als Ausweich für ältere Browser, können Sie ein einzelnes Bild umfassen, die alle kombinierten Elemente Ihrer separate Bilder an der Spitze des Style-Block hat, wie durch die hier angemerkt, /* Zurückfallen */ Bemerkungen. Diese Methode stellt sicher, dass ältere Browser das erste Bild anzuzeigen, und ignorieren den Rest.

Als Web-Designer, eine der Möglichkeiten, wie Sie ein gewisses Interesse an Ihren 2D-Design hinzufügen können, ist von der linearen Struktur des Gitters zu brechen, indem sie ein Objekt im Raum drehen. Mit CSS3, können Sie mühelos ein Objekt drehen, indem Sie die Anwendung Transformation: drehen Stil zu jedem Objekt:

.drehen {verwandeln: drehen (-4deg) - Webkit-transform: rotate (-4deg) - / * Safari und Chrome * / - moz-transform: rotate (-4deg) - / * Firefox * / - o-transform: drehen (-4deg) - / * Opera * /}

Objekte können im Uhrzeigersinn gedreht werden (4deg) Oder gegen den Uhrzeigersinn (-4deg). Sie können auch ein Objekt mit dem Umfang und der Skew Rahmen() und Skew () Transformationsverfahren durch numerische Werte oder Grad für die X-Achse und Y-Achse festgelegt wird:

div {verwandeln: Skala (3,6) - ms-transform: Skala (3,6) - / * IE 9 * / - Webkit-transform: Skala (3,6) - / * Safari und Chrome * / - o -Transform: Skala (3,6) - / * Opera * / - moz-transform: Skala (3,6) - / * Firefox * /} {div verwandeln: Skew (10deg, 20deg) - ms-transform: Skew (10deg, 20deg) - / * IE 9 * / - webkit-transform: Skew (10deg, 20deg) - / * Safari und Chrome * / - o-transform: Skew (10deg, 20deg) - / * Opera * / - moz -Transform: Skew (10deg, 20deg) - / * Firefox * /}