Detaillierte Erklärung des CSS3-Rotationswürfelproblems

Detaillierte Erklärung des CSS3-Rotationswürfelproblems

3D-Koordinatenkonzept

  • Wenn sich ein Element dreht, dreht sich seine Koordinatenachse mit.
  • Beachten Sie das Problem mit der -y-Richtung

Der Effekt der Würfelrotation

analysieren

  • Ein Container enthält 6 Divs
  • Position: absolut, dann überlappen sich die sechs Flächen vollständig
  • Durch Transformation an die entsprechende Position anpassen: rotateX/Y/Z(), translateX/Y/Z()
  • Fügen Sie Übergangsanimationseffekte hinzu
  • Beachten Sie, dass die Drehung hier um die Mittellinie erfolgt, sodass nur 100 Pixel
  • Wenn er sich dreht, dreht sich auch seine Koordinatenachse mit ihm (das ist sehr wichtig)

Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0px;
            Polsterung: 0px;

        }
        Körper{
            Perspektive: 800px;
            Hintergrund: #000000;
        }
        #Container{
            Höhe: 200px;
            Breite: 200px;
            Rand: 100px auto 0;
            Position: relativ;
            Transformationsstil: 3D bewahren;
            Animation: Bewegung 1 Sekunde, unendlich;

        }
        @keyframes verschieben{
            aus{
                transformieren: Y-Drehung (0 Grad) Z-Drehung (0 Grad);
            }
            Zu{
                transformieren: Y-Drehung (360 Grad) Z-Drehung (360 Grad);
            }
            
        }
        #container>div{
            Höhe: 100%;
            Breite: 100 %;
            Rahmenradius: 5px;
            Hintergrund: rgba(255,255,255,0,5);
            Position: absolut;
            links: 0px;
            rechts: 0px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 200px;
            Schriftgröße: 30px;
        }
        #eins{
            transformieren: drehenX(-90 Grad) übersetzenZ(100px);
        }
        #zwei{
            transformieren: übersetzenZ(100px);
        }
        #drei{
            transformieren: Y drehen (-90 Grad) Z verschieben (100px);
        }
        #vier{
            transformieren: Y drehen (-180 Grad) Z verschieben (100px);
        }
        #fünf{
            transformieren: Y drehen (90 Grad) Z verschieben (100 Pixel);
        }
        #sechs{
            transformieren: übersetzenZ(-100px);
        }
        
    </Stil>
</Kopf>
<Text>
    <div id="Behälter">
        <div id="eins">1</div>
        <div id="zwei">2</div>
        <div id="drei">3</div>
        <div id="vier">4</div>
        <div id="fünf">5</div>
        <div id="sechs">6</div>
    </div>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  html-Seite!--[if IE]...![endif]--Detaillierte Einführung in die Verwendung

>>:  MySQL-unabhängiger Index und gemeinsame Indexauswahl

Artikel empfehlen

Detaillierte Erklärung der Unterschiede zwischen JS-Arrays „Finden“, „Some“, „Filtern“ und „Reduzieren“

Erkennen Sie die Unterschiede zwischen den Method...

Vergleichende Analyse von IN und Exists in MySQL-Anweisungen

Hintergrund Als ich kürzlich SQL-Anweisungen schr...

Welche magischen Anwendungen haben CSS-Filter?

Hintergrund Grundlegende Konzepte CSS filter wend...

Erstellen von responsiven E-Mails mit Vue.js und MJML

MJML ist ein modernes E-Mail-Tool, mit dem Entwic...

Warum wird deine Like-Aussage nicht indexiert?

Vorwort Dieser Artikel zielt darauf ab, die langw...

nginx löst das Problem der langsamen Bildanzeige und des unvollständigen Downloads

Vorne geschrieben Kürzlich berichtete mir ein Les...

Lösung für das Problem, dass MySQL im Windows-System kein Chinesisch eingeben und anzeigen kann

Schritt 1: Öffnen Sie mit dem Editor die Datei „m...

Das Problem, dass bei der Installation von RabbitMQ in Docker die Verwaltungsseite nicht aufgerufen werden kann

1. Umweltvorbereitung Tencent Cloud Server CENTOS...

Verwendung von MySQL DDL-Anweisungen

Vorwort Die Sprachklassifikation von SQL umfasst ...

Beschreibung der chinesischen Sortierregeln für MySQL

Bei der Verwendung von MySQL sortieren und fragen...

Detaillierte Erläuterung von Kompatibilitätsproblemen und Lösungen zum Festlegen der maximalen und minimalen Breite in der Tabelle

Festlegen der Eigenschaften für Mindest- und Maxi...

Implementierungsschritte zur Installation von RocketMQ im Docker

Inhaltsverzeichnis 1. Rufen Sie das Bild ab 2. Br...

So erstellen Sie ein stilvolles Webseiten-Design (Grafik-Tutorial)

„Großartig“ sind wahrscheinlich die beiden Worte, ...

Der gesamte Prozess der Installation von Gogs mit Pagoda Panel und Docker

Inhaltsverzeichnis 1 Installieren Sie Docker im B...

Kann Asynchronität in JavaScript „Await“ speichern?

Ich wusste vorher, dass man await verwenden muss,...