Erstellen Sie einen rotierenden Webpack -Logo -Würfel mit Maskierung und dicken Randeffekten mit CSS3

In diesem Artikel wird beschrieben, wie Sie CSS3 verwenden, um einen coolen Webpack -Logo -Rotationswürfel zu erstellen, der zwei Schichten innen und au?en enth?lt, mit Maskierung und dicken Randeffekten. Wir werden die anf?ngliche Codestruktur verbessern, um die erwarteten Ergebnisse effektiver zu erzielen.

Das anf?ngliche Schema versuchte, Würfel mit ::before und ::after Pseudoelementen zu erstellen, aber es gab M?ngel in Bezug auf Rotations- und Maskierungseffekte. Dies liegt daran, dass Pseudoelemente nicht ideal für den Bau dreidimensionaler Würfel sind. Eine bessere L?sung ist die Verwendung<div> Elemente repr?sentieren sechs Gesichter des Würfels und verwenden CSS3s <code>transform-style: preserve-3d; Attribute sowie Eigenschaften wie rotateX , rotateY , translateZ um eine dreidimensionale Rotation und Positionierung zu erreichen. Der innere Würfel erreicht den Maskierungseffekt des ?u?eren Würfels, indem er die Gr??e und Position einstellt. Der dicke Rand wird erreicht, indem das border-width Attribut jedes Gesichts festgelegt wird.

Die verbesserte HTML -Struktur lautet wie folgt:

<div class="cube outer">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
  <div class="face left"></div>
  <div class="face right"></div>
  <div class="cube inner">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
  </div>
</div>

Entsprechender CSS -Stil:

 K?rper {
  Hintergrund: #2B3A42;
}

:Wurzel {
  -Depth: 50px;
}

.Cube {
  Breite: 100px;
  H?he: 100px;
  Position: Relativ;
  Transform-Stil: Preserve-3d;
  Transformation: Translate (-50%, -50%) rotatex (-35de) rotatey (-135deg) translatez (var (-Tiefe));
  Position: absolut;
  Top: 50%;
  Links: 50%;
}

.Gesicht {
  Position: absolut;
  Breite: 100px;
  H?he: 100px;
  Kastengr??en: Border-Box;
  Z -Index: -1;
}

.Front {
  Transformation: TranslateZ (var (-Tiefe));
}

.zurück {
  Transformation: Rotatey (180 °) TranslateZ (var (-Tiefe));
}

.Spitze {
  Transformation: rotatex (90DEG) TranslateZ (var (-Tiefe));
}

.unten {
  Transformation: rotatex (-90de) translatez (var (-Tiefe));
}

.links {
  Transformation: rotatey (-90de) translatez (var (-Tiefe));
}

.Rechts {
  Transformation: Rotatey (90 °) TranslateZ (var (-Tiefe));
}

.OUTER> .FACE {
  Hintergrund: #75AFCC;
  Grenze: 1px fest Wei?;
}

.outer> .back, .outer> .top, .outer> .right {
  Hintergrund: Keine;
  Randbreit: 0,5px;
  Grenzrechte Breite: 5px;
  Grenzbodenbreite: 5px;
  Border-Links-Breite: 5px; /*Einheitliche Einstellung des dicken Randes*/
  Z-Index: 100;
}

.inner {
  Breite: 50px;
  H?he: 50px;
  Transformation: Translate (-50%, -50%);
}

.innner> .face {
  -Depth: 25px;
  Breite: 50px;
  H?he: 50px;
  Hintergrund: #5299c8;
}

Masken- und dicke Randeffekte k?nnen leicht erreicht werden, indem der Hintergrund der partiellen Oberfl?chen des ?u?eren Würfels auf none gesetzt und border-width angepasst wird. Die Gr??e und Position des inneren Würfels k?nnen nach Bedarf eingestellt werden. Diese Methode erstellt effektiv den Webpack -Logo -Effekt, der den Erwartungen entspricht.