Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

Einmal haben wir über das Würfelspiel gesprochen. Damals haben wir ein Schritteattribut + Sprite-Bild verwendet, um eine Frame-Animation zu erstellen. Das ist natürlich ziemlich gut, aber eigentlich war das nicht das, was ich am Anfang dachte. Ich wollte echtes 3D und Animation verwenden, um es zu erstellen. Dieser Plan erfordert viel räumliches Wissen. Heute werde ich Ihnen erklären, wie Sie dieses CSS 3D spielen.

Zunächst das Effektbild:

Grundidee: Dreischichtiger Aufbau: perspektivischer Behälter >> Träger >> konkretes 3D-Bild.

Perspektivcontainer: bestimmt den 3D-Rendering-Effekt. Das Perspektivattribut erhält hier Parameter in Pixeln. Je größer der Perspektivwert, desto weiter sind die Augen vom betrachteten Objekt entfernt, und je kleiner der Wert, desto näher sind die Augen am betrachteten Objekt.

Ohne das Perspektivattribut kann der Betrachtungswinkel nicht angepasst werden.

Träger: Unterstützt 3D-Bilder

Der größte Unterschied zwischen diesem Vektor und gewöhnlichen HTML-Tags besteht darin, dass er über ein zusätzliches Attribut verfügt: transform-style:preserve-3d. Zeigt an, dass die 3D-Bildanzeige unterstützt wird.

Wenn dieses Attribut fehlt, werden die 3D-Grafiken, die einer 3D-Konvertierung unterzogen wurden, in eine 2D-Ebene komprimiert und können keinen 3D-Effekt darstellen, da der Container flach ist, auch wenn der Inhalt 3D ist.

Konkrete 3D-Bilder: Konvertierung von 2D nach 3D

Die 3D-Bilder hier wurden alle aus 2D-Ebenenbildern konvertiert. Wie konvertiert man sie also? Sie müssen die Attribute „translateX“, „translateY“, „translateZ“ verwenden (die Abkürzung lautet natürlich „translate-3d“) und „rotateX“, „rotateY“, „rotateZ“ und so weiter. Die spezifischen Regeln zum Verschieben und Drehen basieren auf dem berühmten Referenzbild unten: dreidimensionales Koordinatendiagramm.

Lassen Sie uns zunächst über die Übersetzungsregeln sprechen. Dies muss nicht im Detail erklärt werden. Beziehen Sie sich einfach darauf. Beispielsweise entspricht „translateZ(-100px)“ in diesem Bild dem Verschieben des Bilds um 100 Pixel in Richtung der -z-Achse. Eine anschaulichere Art, es auszudrücken, ist „100 Pixel in den Bildschirm versenkt“. translateX, translateY und so weiter.

Die Schwierigkeit liegt in der Drehung. Lassen Sie mich Ihnen eine sehr einfache Beurteilungsregel nennen: Wenn die positive Achse den Augen zugewandt ist, ist der Drehwinkel im Uhrzeigersinn positiv und der Drehwinkel gegen den Uhrzeigersinn negativ.

So einfach ist das. Wenn wir beispielsweise einen 3D-Würfel herstellen möchten, werden zunächst die sechs Ebenen in der Mitte des dreidimensionalen Koordinatensystems platziert, wie in der Abbildung oben gezeigt. Ihre Größen sind die gleichen wie die des Trägers. Um sie in einen Würfel umzuwandeln, müssen die folgenden Transformationen durchgeführt werden:

(Hinweis: Die Länge und Breite des Trägers und der sechs Flächen betragen beide 200 Pixel.)

Schauen Sie sich einfach das 3D-Bild an und machen Sie ein paar Gesten, dann wissen Sie, was los ist.

Den gesamten Quellcode anhängen:

<Vorlage>
  <div Klasse="Box">
    <Abschnitt Klasse="Würfel">
      <div class="front">Vorderseite</div>
      <div class="back">Zurück</div>
      <div class="left">Links</div>
      <div class="right">Rechts</div>
      <div class="top">Oben</div>
      <div class="bottom">Unten</div>
    </Abschnitt>
  </div>
</Vorlage>
<style lang="less" scoped>
.Kasten {
  Breite: 100 %;
  Höhe: 100%;
  Perspektive: 500px;
}
.Würfel {
  Position: relativ;
  Breite: 200px;
  Höhe: 200px;
  Rand: 100px automatisch;
  Farbe: #ff92ff;
  Schriftgröße: 36px;
  Schriftstärke: 100;
  Textausrichtung: zentriert;
  Zeilenhöhe: 200px;
  Transformationsstil: 3D bewahren;
  transformieren: X-Drehung (-50 Grad) Y-Drehung (-50 Grad) Z-Drehung (0 Grad);
  // Animation: 8 s unendlich linear bewegen;
  @keyframes verschieben {
    0% {
      transformieren: X-Drehen (0 Grad) Y-Drehen (0 Grad) Z-Drehen (0 Grad);
    }
    100 % {
      transformieren: X-Drehen (720 Grad) Y-Drehen (360 Grad) Z-Drehen (360 Grad);
    }
  }
  div {
    Position: absolut;
    Breite: 100 %;
    Höhe: 100%;
    Rand: 10px durchgezogen #66daff;
    Rahmenradius: 20px;
    Hintergrundfarbe: rgba(51, 51, 51, 0,3);
  }
  .vorne {
    transformieren: übersetzenZ(100px);
  }
  .zurück {
    transformieren: verschiebeZ(-100px) dreheY(180 Grad);
  }
  .links {
    transformieren: verschiebeX(-100px) dreheY(-90 Grad);
  }
  .Rechts {
    transformieren: verschiebeX(100px)dreheY(90 Grad);
  }
  .Spitze {
    transformieren: verschiebeY(-100px) dreheX(90 Grad);
  }
  .unten {
    transformieren: verschiebeY(100px) dreheX(-90 Grad);
  }
}
</Stil>

Zusammenfassen

Oben habe ich Ihnen alles von CSS 3D bis zu räumlichen Koordinatenachsen mit Quellcode vorgestellt. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!