Comment construire un cube rotatif de logo WebPack avec ombrage et effets de bordure épais dans CSS3?

Construisez un cube de logo webpack rotatif avec masquage et effets de bordure épais à l'aide de CSS3

Cet article détaille comment utiliser CSS3 pour construire un cube rotatif de logo Webpack cool qui contient deux couches à l'intérieur et à l'extérieur, avec un masquage et des effets de bordure épais. Nous améliorerons la structure initiale du code pour obtenir les résultats attendus plus efficacement.

Le schéma initial a essayé de créer des cubes en utilisant ::before et ::after des pseudo-éléments, mais il y avait des lacunes en termes de rotation et d'effets de masquage. En effet, les pseudo-éléments ne sont pas idéaux pour construire des cubes tridimensionnels. Une meilleure solution consiste à utiliser<div> Les éléments représentent six faces du cube et utilisent <code>transform-style: preserve-3d; Les attributs, ainsi que les propriétés telles que rotateX , rotateY , translateZ pour obtenir une rotation et un positionnement tridimensionnels. Le cube intérieur atteint l'effet de masquage du cube extérieur en ajustant la taille et la position. La bordure épaisse est obtenue en fixant l'attribut border-width de chaque visage.

La structure HTML améliorée est la suivante:

<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>

Style CSS correspondant:

 corps {
  Contexte: # 2B3A42;
}

:racine {
  - Depth: 50px;
}

.cube {
  Largeur: 100px;
  hauteur: 100px;
  Position: relative;
  style transform: Preserve-3d;
  Transformer: traduire (-50%, -50%) Rotatex (-35Deg) Rotatey (-135DEG) Translatez (var (- profondeur));
  Position: absolue;
  en haut: 50%;
  Gauche: 50%;
}

.affronter {
  Position: absolue;
  Largeur: 100px;
  hauteur: 100px;
  Dimensionnement en boîte: Border-Box;
  Z-Index: -1;
}

.devant {
  transform: tradlatez (var (- profondeur));
}

.dos {
  Transform: Rotatey (180Deg) Translatez (var (- profondeur));
}

.haut {
  Transform: Rotatex (90Deg) Translatez (var (- profondeur));
}

.bas {
  Transform: Rotatex (-90DEG) Translatez (var (- profondeur));
}

.gauche {
  Transform: Rotatey (-90DEG) Translatez (var (- profondeur));
}

.droite {
  Transform: Rotatey (90Deg) Translatez (var (- profondeur));
}

.outer> .face {
  Contexte: # 75AFCC;
  Border: 1px blanc solide;
}

.outer> .back, .outer> .top, .outer> .Right {
  Contexte: aucun;
  largeur frontalière: 0,5px;
  largeur de droite: 5px;
  largeur de la frontière: 5px;
  bordure-gauche: 5px; / * Réglage unifié de la bordure épaisse * /
  Z-Index: 100;
}

.intérieur {
  Largeur: 50px;
  hauteur: 50px;
  Transformer: traduire (-50%, -50%);
}

.inner> .face {
  - Depth: 25px;
  Largeur: 50px;
  hauteur: 50px;
  Contexte: # 5299C8;
}

Le masque et les effets épais de la bordure peuvent être facilement réalisés en définissant l'arrière-plan des surfaces partielles du cube extérieur à none et en ajustant border-width . La taille et la position du cube intérieur peuvent être ajustées au besoin. Cette méthode construit efficacement l'effet de logo WebPack qui répond aux attentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!