Wie baue ich ein Webpack -Logo rotierender Würfel mit Schattierungen und dicken Randeffekten in CSS3?

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.

Das obige ist der detaillierte Inhalt vonWie baue ich ein Webpack -Logo rotierender Würfel mit Schattierungen und dicken Randeffekten in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!