So drehen Sie den Hintergrund mit CSS

CSS Rotated Background

CSS (Cascading Style Sheets) ist eine weit verbreitete Technologie zur Steuerung des Erscheinungsbilds und Layouts von Webseiten. Mit CSS können Sie den Hintergrund steuern, einschließlich Farbe, Bild und Positionierung. Allerdings verfügt CSS auch über eine coole Funktion: Sie können den Hintergrund drehen, um der Website ein einzigartiges Erscheinungsbild zu verleihen.

Die Grundidee beim Drehen des Hintergrunds besteht darin, die Transformationseigenschaft von CSS3 zu verwenden. Mit diesem Attribut können Entwickler Elemente transformieren, indem sie ihre Matrixtransformation in zwei oder drei Dimensionen angeben. Mit der Funktion „rotate()“ können wir das Objekt drehen. Wir können auch die Funktion Translate() verwenden, um die X- und Y-Koordinaten des Objekts festzulegen.

Sehen wir uns unten einige Beispiele an, um zu zeigen, wie man einen Hintergrund mit CSS dreht.

Beispiel 1: Einen einfarbigen Hintergrund mit CSS drehen

Schauen wir uns zunächst an, wie man einen einfarbigen Hintergrund mit CSS dreht. Wir können dies mit dem folgenden CSS-Code tun:

div {
    height: 100vh;
    width: 100vw;
    background-color: #FF6633;
    position: relative;
    transform: rotate(30deg);
    transform-origin: center;
}

In diesem Beispiel hat das div-Element dieselbe Höhe und Breite wie die Größe des Ansichtsfensters. Die Hintergrundfarbe ist auf Orange eingestellt. Die Position ist relativ zum Dokumentfluss. Mithilfe des Transformationsattributs und der Funktion „Rotate()“ können wir den Hintergrund um 30 Grad drehen, um ihm einen geneigten Effekt auf der Seite zu verleihen. Außerdem legen wir die Eigenschaft „transform-origin“ so fest, dass die Drehung um den Mittelpunkt erfolgt.

Beispiel 2: Bildhintergrund mit CSS drehen

Wir können die gleiche Technik verwenden, um den Bildhintergrund zu drehen. Hier ist ein Beispiel, das zeigt, wie man ein Hintergrundbild mit CSS dreht:

div {
    height: 100vh;
    width: 100vw;
    background-image: url("background.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background-image: inherit;
    transform: rotate(30deg);
    z-index: -1;
}

In diesem Beispiel verwenden wir ein div-Element mit einem Hintergrundbild. Wir legen die Eigenschaft „background-size:cover“ fest, um das Hintergrundbild so anzupassen, dass es ohne Abschneiden rotiert. Wir verbergen auch das Hintergrundbild, indem wir das Attribut overflow:hidden verwenden.

Als nächstes verwenden wir das Pseudoelement :before, um ein Hintergrundbild derselben Größe zu erstellen, drehen es dann um 30 Grad und verwenden das Z-Index-Attribut, um es unter dem Hintergrund zu platzieren. Durch Festlegen der Eigenschaften „top: -50 %“ und „left: -50 %“ ist seine Position relativ zum Mittelpunkt des übergeordneten div-Elements.

Beispiel 3: Texthintergrund mit CSS drehen

Wir können CSS auch verwenden, um Text als Hintergrund zu drehen. Hier ist ein Beispiel, das zeigt, wie man einen Texthintergrund mit CSS dreht:

div {
    height: 100vh;
    width: 100vw;
    font-size: 80px;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background: #FF6633;
    transform: rotate(30deg);
    z-index: -1;
}

h1 {
    color: #FFFFFF;
    transform: rotate(-30deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

In diesem Beispiel verwenden wir ein div-Element mit Text und platzieren es auf einem :before-Pseudoelement mit derselben Position und Größe. Wir drehen das :before-Pseudoelement mithilfe des transform:rotate(30deg)-Attributs um 30 Grad und setzen seine Farbe auf Orange.

Als nächstes verwenden wir das Attribut „transform: rotation(-30deg)“, um den Text um 30 Grad zu drehen, und richten ihn am übergeordneten div-Element aus, indem wir position: absolute, top: 50 % und left: 50 % center festlegen. Verwenden Sie abschließend das Attribut Translate(-50%, -50%), um es zu zentrieren.

Zusammenfassung

Der rotierende CSS-Hintergrund ist ein cooler Effekt, mit dem eine Website interessanter und attraktiver aussehen kann. In diesem Artikel haben wir Beispiele für einfarbige Hintergründe, Bildhintergründe und Texthintergründe verwendet, um zu demonstrieren, wie man einen Hintergrund mit CSS dreht. Die Eigenschaft transform:rotate(), die wir in der Demo verwendet haben, ist sehr praktisch, um den Hintergrund durch Angabe des Grades zu drehen.

Das obige ist der detaillierte Inhalt vonSo drehen Sie den Hintergrund mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!