CSS3 erzielt einen coolen 3D-Rotationsperspektiveneffekt

CSS3 erreicht coole 3D-Rotationsperspektive

3D-Animationseffekte erfreuen sich immer größerer Beliebtheit und werden auf verschiedenen Plattformen häufig verwendet, beispielsweise auf der Alibaba Cloud, der Huawei Cloud und der offiziellen Webpack-Website usw. Dadurch können unsere Produkte und Einführungen realistischer dargestellt werden und erzielen eine starke visuelle Wirkung. Um sich zu verbessern, ist CSS3-3D-Animation daher unerlässlich.

Was Sie lernen werden

• Einführung in gängige APIs für CSS3-3D-Transformationen
• CSS3 3D-Anwendungsszenarien
• CSS3 3D realisiert einen Würfel
  

Start

1. Einführung in gängige APIs für CSS3 3D-Transformationen

Schauen wir uns zunächst das CSS-3D-Koordinatensystem an:

Als nächstes stellen wir einige häufig verwendete APIs vor:

Drehung

• rotateX()
• rotateY()
• rotateZ() Die obigen APIs stellen die Rotation um die x-, y- und z-Achse dar. Das folgende Beispiel ist ein Beispiel für die Rotation um die x-Achse:

Der entsprechende Code lautet wie folgt:

<Stil>
.d3-Wrap {
    Position: relativ;
    Breite: 300px;
    Höhe: 300px;
    Rand: 120px automatisch;
    /* Gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden */
    Transformationsstil: 3D bewahren;
    transformieren: X-Drehung (0) Y-Drehung (45 Grad);
    Transform-Ursprung: 150px 150px 150px;
}

.rotateX {
    Breite: 200px;
    Höhe: 200px;
    Hintergrundfarbe: #06c;
    Übergang: Transformation 2 s;
    Animation: RotierenX 6s unendlich;
}

@keyframes rotateX {
    0% {
        transformieren: drehenX(0);
    }
    100 % {
        transformieren: drehenX(360 Grad);
    } 
}
</Stil>
<div Klasse="d3-wrap">
    <div Klasse="rotateX"></div>
</div>

Verwandeln

• translateX(x) definiert eine 3D-Translation, wobei nur der Wert für die X-Achse verwendet wird
• translateY(y) definiert eine 3D-Translation, wobei nur der Wert für die Y-Achse verwendet wird
• translateZ(z) definiert eine 3D-Transformation, wobei nur der Wert für die Z-Achse verwendet wird. Die obigen APIs stellen Verschiebungen relativ zu den x-, y- und z-Achsen dar. Das folgende Beispiel zeigt Verschiebungen entlang der z-Achse:

Hier müssen wir beachten, dass wir dem übergeordneten Container die folgenden Eigenschaften hinzufügen müssen, um den Effekt der Verschiebung anzuzeigen:

.d3-Wrap {
    Transformationsstil: 3D bewahren;
    Perspektive: 500;
    /* Legen Sie die Ansicht fest, in der das Element angezeigt wird */
    -WebKit-Perspektive: 500;
}

Wenn Sie die Perspektiveigenschaft für ein Element definieren, erhalten seine untergeordneten Elemente den Perspektiveffekt, nicht das Element selbst. Der Code lautet wie folgt:

.d3-Wrap {
    Position: relativ;
    Breite: 300px;
    Höhe: 300px;
    Rand: 120px automatisch;
    Transformationsstil: 3D bewahren;
    Perspektive: 500;
    -WebKit-Perspektive: 500;
    transformieren: X-Drehung (0) Y-Drehung (45 Grad);
    Transform-Origin: Mitte Mitte;
}

.transformZ {
    Breite: 200px;
    Höhe: 200px;
    Hintergrundfarbe: #06c;
    Übergang: Transformation 2 s;
    Animation: TransformZ 6s unendlich;
}

@keyframes transformZ {
    0% {
        transformieren: übersetzenZ(100px);
    }
    100 % {
        transformieren: übersetzenZ(0);
    } 
}

3D-Zoom

• scaleX(x) gibt einen 3D-Skalierungstransformationswert entlang der X-Achse an
• scaleY(x) gibt einen 3D-Skalierungstransformationswert auf der Y-Achse an
• scaleZ(x) gibt einen 3D-Skalierungstransformationswert der Z-Achse an. Die Skalierungseinstellungen sind ähnlich wie oben, daher werde ich hier nicht näher darauf eingehen.
  

Theoretisch reichen die oben genannten drei allgemeinen Transformationen aus. Es ist anzumerken, dass die folgenden APIs, die nicht ignoriert werden können, ebenfalls sehr wichtig sind, wenn wir den Elementen 3D-Effekte verleihen möchten:

2. CSS3 3D-Anwendungsszenarien

CSS 3D wird hauptsächlich für Website-Interaktionen und Modelleffekte verwendet, wie zum Beispiel:

3D Karussell
3D Produkteinführung Indoor 3D Simulation
h5 3D-Aktivitätsseite, ein typisches Beispiel ist Taobaos Jahresendzusammenfassung H5
3D-Datenvisualisierung
Wenn Sie mit CSS 3D vertraut sind, können Sie mit CSS einige grundlegende 3D-Modelle zeichnen.

3. CSS3 3D realisiert einen Würfel

Die Grundidee besteht darin, sechs Flächen zum Verbinden zu verwenden und ihre Positionen durch Drehen und Verschieben wie folgt anzupassen:

Der spezifische Code lautet wie folgt:

.container {
    Position: relativ;
    Breite: 300px;
    Höhe: 300px;
    Rand: 120px automatisch;
    Transformationsstil: 3D bewahren;
    /* Um es dreidimensionaler zu machen*/
    transformieren: X-Drehung (-30 Grad) Y-Drehung (45 Grad);
    Transform-Ursprung: 150px 150px 150px;
    Animation: 6 s unendlich rotieren;
}
.container .seite {
    Position: absolut;
    Breite: 300px;
    Höhe: 300px;
    Textausrichtung: zentriert;
    Zeilenhöhe: 300px;
    Farbe: #fff;
    Hintergrundgröße: Abdeckung;
}
.container .page:erstes-Kind {
    Hintergrundbild: URL(./my.jpeg);
    Hintergrundfarbe: rgba(0,0,0,.2);
}
.container .page:n-tes-Kind(2) {
    transformieren: rotierenX(90 Grad);
    Transform-Ursprung: 0 0;
    Übergang: Transformation 10 s;
    Hintergrundfarbe: rgba(179, 15, 64, 0,6);
    Hintergrundbild: URL(./my2.jpeg);
}

.container .page:n-tes-Kind(3) {
    transformieren: übersetzenZ(300px);
    Hintergrundfarbe: rgba (22, 160, 137, 0,7);
    Hintergrundbild: URL(./my3.jpeg);
}

.container .page:n-tes-Kind(4) {
    transformieren: rotierenX(-90 Grad);
    Transform-Ursprung: -300px 300px;
    Hintergrundfarbe: rgba(210, 212, 56, 0,2);
    Hintergrundbild: URL(./my4.jpeg);
}
.container .page:n-tes-Kind(5) {
    transformieren: Y-Drehung (-90 Grad);
    Transform-Ursprung: 0 0;
    Hintergrundfarbe: rgba(201, 23, 23, 0,6);
    Hintergrundbild: URL(./my5.jpeg);
}
.container .page:n-tes-Kind(6) {
    transformieren: Y drehen (-90 Grad) Z verschieben (-300 Pixel);
    Transform-Ursprung: 0 300px;
    Hintergrundfarbe: rgba(16, 149, 182, 0,2);
    Hintergrundbild: URL (./my6.jpeg);
}

HTML-Struktur

<div Klasse="Container">
    <div Klasse="Seite">A</div>
    <div class="page">B</div>
    <div class="page">C</div>
    <div Klasse="Seite">D</div>
    <div class="page">E</div>
    <div class="page">F</div>
</div>

Zusammenfassen

Das Obige ist die Einführung des Herausgebers in den coolen 3D-Rotationsperspektiveneffekt, der mit CSS3 erzielt wird. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!