Connaissez-vous ces bo?tes ondulées complètement plates? Vous pouvez les plier et les enregistrer pour faire une bo?te pratique. Lorsque le recyclage est nécessaire, coupez-les et aplatissez-les. Récemment, j'ai été consulté avec une version d'animation 3D de ce concept et j'ai pensé que ce serait un tutoriel intéressant pour l'implémenter avec Pure CSS, alors nous avons commencé!

à quoi ressemblerait ce genre d'animation? Comment créons-nous une chronologie d'emballage? La taille peut-elle être ajustée de manière flexible? Créons un effet de bascule du package CSS pur.

L'effet final est le suivant: Cliquez pour emballer et déballer le carton.

Par où commencer?

Par où commencer? Il est préférable de faire des plans à l'avance. Nous savons que nous avons besoin d'un modèle d'emballage et nous devons le plier dans un espace tridimensionnel. Si vous n'êtes pas familier avec CSS 3D, je vous suggère de lire cet article pour commencer.

Si vous connaissez 3D CSS, vous pouvez avoir tendance à construire un cubo?de puis à commencer. Cependant, cela entra?ne quelques problèmes. Nous devons considérer comment le package est converti de 2D à 3D.

Commen?ons par créer un modèle. Nous devons planifier les marques à l'avance et réfléchir à la fa?on dont nous voulons que l'animation d'emballage fonctionne. Commen?ons par du HTML.

<div>
  <div>
    <div>
      <div>
        <div></div>
        <div></div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
          <div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Mixin est une bonne idée

Il y a beaucoup de contenu ici. Il y a beaucoup de div. J'aime souvent utiliser des carlins pour générer des balises afin que le contenu puisse être divisé en morceaux réutilisables. Par exemple, chaque c?té a deux couvertures. Nous pouvons créer un mixin carlin pour le c?té et appliquer le nom de la classe de modificateurs à l'aide de propriétés pour rendre toutes ces balises plus faciles à écrire.

 Mélanger les volets ()
  .package__flap.package__flap - au sommet
  .Package__flap.package__flap - Bottom

Mélange du c?té (classe)
  .Package__side (class = `package__side - $ {classe || 'Side'}`)
     Volets ()
    Bloc

.scène
  .Package__wrapper
    .emballer
       c?té ('main')
         c?té ('extra')
         c?té (?flippé?)
           c?té ('tabbed')

Nous avons utilisé deux mixins. On crée une couverture pour chaque c?té de la bo?te. Un autre crée le c?té de la bo?te. Notez que dans le mélange latéral, nous utilisons le bloc. Les éléments enfants de l'utilisation du mixine sont présentés ici, ce qui est particulièrement utile car nous devons nidifier certains c?tés plus tard pour simplifier notre travail.

Tags générés:

<div class="scene">
  <div class="package__wrapper">
    <div class="package">
      <div class="package__side package__side--main">
        <div class="package__flap package__flap--top"></div>
        <div class="package__flap package__flap--bottom"></div>
        <div class="package__side package__side--extra">
          <div class="package__flap package__flap--top"></div>
          <div class="package__flap package__flap--bottom"></div>
        </div>
      </div>
      <div class="package__side package__side--flipped">
        <div class="package__flap package__flap--top"></div>
        <div class="package__flap package__flap--bottom"></div>
        <div class="package__side package__side--tabbed">
          <div class="package__flap package__flap--top"></div>
          <div class="package__flap package__flap--bottom"></div>
        </div>
      </div>
    </div>
  </div>
</div>

C?té imbriqué

Les c?tés imbriqués facilitent l'enveloppe pliante. Tout comme il y a deux couvertures de chaque c?té. Les éléments enfants latéraux peuvent hériter de la transformation latérale, puis appliquer leur propre transformation. Si nous commen?ons par un cubo?de, il est difficile d'en profiter.

Consultez cette démo, qui bascule entre les éléments imbriqués et non imbriqués pour voir l'effet réel.

Chaque bo?te a un ensemble d'origine transformateur dans le coin inférieur droit avec une valeur de 100% à 100%. La sélection de la bascule "Transformer" tournera chaque bo?te de 90 degrés. Cependant, notez que si nous nidons les éléments, le comportement de cette transformation change.

Nous avons changé les balises pour les deux versions, mais rien d'autre n'a été changé.

Nidification:

<div>
  <div>
    <div>
      <div>
        <div></div>
      </div>
    </div>
  </div>
</div>

Non créé:

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Transformez tout

Après avoir appliqué des styles à notre HTML, nous avons notre modèle de package.

Le style spécifie différentes couleurs et localise les c?tés à l'emballage. Chaque c?té est positionné par rapport au c?té "principal". (Vous comprendrez bient?t pourquoi la nidification est si utile.)

Certaines choses doivent être prêtes attention. Tout comme l'utilisation d'un cubo?de, nous utilisons --height , --width et --depth pour déterminer la taille. Cela nous permettrons de modifier plus facilement la taille du package plus tard.

 .emballer {
  hauteur: calc (var (- hauteur, 20) * 1vmin);
  Largeur: calc (var (- largeur, 20) * 1vmin);
}

Pourquoi définir la taille de cette manière? Nous avons utilisé une taille par défaut sans unité de 20, une idée que j'ai eue de la conversation CSS de Lea Verou 2016 (à partir de 52:44). Utilisez des propriétés personnalisées comme "données" au lieu de "valeur", nous pouvons les utiliser comme nous aimons utiliser calc() . De plus, JavaScript n'a pas à se soucier de l'unité de valeur, nous pouvons le changer en pixels, pourcentages, etc. sans le changer ailleurs. Vous pouvez le refacter à des coefficients en --root , mais cela peut rapidement devenir trop complexe.

Les plaques de couverture de chaque c?té doivent également être légèrement plus petites que les c?tés auxquels ils appartiennent. De cette fa?on, lorsque nous les plions, il n'y a pas de conflit d'index z.

 .Package__flap {
  Largeur: 99,5%;
  hauteur: 49,5%;
  Contexte: var (- flap-bg, var (- face-4));
  Position: absolue;
  Gauche: 50%;
  Transform: traduire (-50%, 0);
}
.Package__flap - au sommet {
  Transform-Origin: 50% 100%;
  En bas: 100%;
}
.Package__flap - Bottom {
  en haut: 100%;
  Transform-Origin: 50% 0%;
}
.Package__side - Extra> .Package__flap - Bottom,
.Package__side - Tabbed> .package__flap - Bottom {
  TOP: 99%;
}
.Package__side - Extra> .package__flap - au sommet,
.Package__side - Tabbed> .package__flap - au sommet {
  En bas: 99%;
}

Nous avons également commencé à considérer transform-origin pour chaque composant. Le couvercle supérieur tournera depuis son bord inférieur et le couvercle inférieur tournera à partir de son bord supérieur.

Nous pouvons utiliser des pseudo-éléments pour créer l'étiquette à droite. Nous utilisons clip-path pour obtenir la forme souhaitée.

 .Package__side - a été lancé: après {
  contenu: '';
  Position: absolue;
  Gauche: 99,5%;
  hauteur: 100%;
  Largeur: 10%;
  Contexte: var (- face-3);
  -Webkit-Clip Path: Polygone (0 0%, 100% 20%, 100% 80%, 0 100%);
  Path de clip: polygone (0 0%, 100% 20%, 100% 80%, 0 100%);
  Transform-Origin: 0% 50%;
}

Commen?ons à utiliser nos modèles sur un plan 3D. Nous pouvons d'abord faire tourner .scene sur l'axe des x et les axes y.

 .scène {
  Transformer: Rotatex (-24Deg) Rotatey (-32deg) Rotatex (90Deg);
}

pli

Nous sommes prêts à commencer à plier nos modèles! Nos modèles seront effondrés en fonction des propriétés personnalisées --packaged . Si la valeur est 1, le modèle peut être effondré. Par exemple, effondreons certaines étiquettes latérales et pseudo-éléments.

 .Package__side - a été lancé,
.Package__side - a été lancé: après {
  Transform: Rotatey (calc (var (- emballé, 0) * -90deg));
}
.Package__side - Extra {
  Transform: Rotatey (calc (var (- emballé, 0) * 90deg));
}

Alternativement, nous pouvons écrire une règle pour tous les c?tés qui ne sont pas le c?té "principal".

 .Package__side: pas (.package__side - main),
.Package__side: pas (.package__side - main): après {
  transformée: rotatey (calc ((var (- emballé, 0) * var (- rotation, 90)) * 1deg));
}
.Package__side - Tabit {- rotation: -90;

Cela couvrira tous les c?tés.

Rappelez-vous quand j'ai dit que les c?tés imbriqués nous permettent de hériter de la transformation de l'élément parent? Si nous mettons à jour notre démo afin que nous puissions modifier la valeur de --packaged , nous pouvons voir comment cette valeur affecte la transformation. Essayez de glisser la valeur de --packaged entre 1 et 0 et vous verrez ce que je veux dire.

Maintenant que nous avons un moyen de changer l'état plié du modèle, nous pouvons commencer à gérer un certain mouvement. Notre démonstration précédente bascule entre deux états. Nous pouvons utiliser transition pour cela. Le moyen le plus rapide? Ajoutez une transition transform de chaque élément enfant dans .scene .

 .scène *,
.scene * :: après {
  transition: transform Calc (var (- vitesse, 0,2) * 1s);
}

Transition en plusieurs étapes!

Mais nous ne plions pas tout le modèle à la fois - dans la vraie vie, le processus de pliage est en séquence, nous plierons un c?té et sa couverture d'abord, puis passer à la suivante, et ainsi de suite. Les propriétés personnalisées de la portée sont idéales à cet effet.

 .scène *,
.scene * :: après {
  Transition: transform Calc (var (- vitesse, 0,2) * 1s) calc ((var (- étape, 1) * var (- retard, 0,2)) * 1s);
}

Ici, nous disons que pour chaque transformation, utilisez transition-delay pour se multiplier --step par --delay . --delay La valeur de retard ne change pas, mais chaque élément peut définir ses "étapes" dans la séquence. Nous pouvons alors indiquer clairement l'ordre dans lequel les choses se produisent.

 .Package__side - Extra {
  --Step: 1;
}
.Package__side - a lancé {
  --Step: 2;
}
.Package__side - axé,
.Package__side - Tabré :: After {
  --Step: 3;
}

Découvrez la démo ci-dessous pour mieux comprendre comment cela fonctionne. Modifiez la valeur du curseur pour mettre à jour l'ordre dans lequel les choses se produisent. Pouvez-vous changer la voiture gagne?

La même technologie est la clé de ce que nous devons faire ensuite. Nous pourrions même introduire un --initial-delay , ajoutant une légère pause à tout pour un effet plus réaliste.

 .RACE__light - Animé,
.RACE__light - Animé: après,
.voiture {
  Animation-retard: calc ((var (- étape, 0) * var (- retard-step, 0)) * 1s);
}

Si nous regardons notre package, nous pouvons aller plus loin et appliquer les "étapes" à tous les éléments qui seront convertis. C'est assez verbeux, mais cela fonctionne. Alternativement, vous pouvez alimenter ces valeurs dans la balise.

 .Package__side - Extra> .Package__flap - Bottom {
  --Step: 4;
}
.Package__side - Tabbed> .package__flap - Bottom {
  --Step: 5;
}
.Package__side - Main> .Package__flap - Bottom {
  --Step: 6;
}
.Package__side - flipped> .package__flap - bottom {
  - STEP: 7;
}
.Package__side - Extra> .package__flap --top {
  --Step: 8;
}
.Package__side - Tabbed> .package__flap - au sommet {
  - STEP: 9;
}
.Package__side - Main> .package__flp - top {
  --Step: 10;
}
.Package__side - flipped> .package__flap - au sommet {
  --Step: 11;
}

Cependant, cela semble irréaliste.

Peut-être que nous devrions retourner la bo?te

Si je plie la bo?te dans la vraie vie, je pourrais d'abord retourner la bo?te, puis replier le couvercle supérieur. Comment pouvons-nous faire cela? Eh bien, ceux qui ont des yeux pointus ont peut-être remarqué l'élément .package__wrapper . Nous l'utiliserons pour glisser le package. Ensuite, nous tournons l'enveloppe autour de l'axe des x. Cela donnera l'impression de tourner l'emballage sur le c?té.

 .emballer {
  Transform-Origin: 50% 100%;
  Transform: Rotatex (calc (var (- emballé, 0) * -90DEG));
}
.Package__wrapper {
  Transform: tradlate (0, calc (var (- emballé, 0) * -100%));
}

Ajustez la déclaration --step en conséquence et nous pouvons obtenir un effet similaire à cela.

Développer la bo?te

Si vous bascule entre les états pliés et dépliés, vous remarquerez que l'expansion semble mal. L'ordre d'expansion doit être l'inverse complet de l'ordre d'effondrement. Nous pouvons flip --step selon --packaged et le nombre d'étapes. Notre dernière étape est de 15. Nous pouvons mettre à jour notre conversion à ceci:

 .scène *,
.scene *: après {
  --No-OF-Steps: 15;
  --Step-Delay: calc (var (- étape, 1) - ((1 - var (- emballé, 0)) * (var (- étape) - ((var (- no-thes) 1) - var (- étape))))));
  Transition: transform Calc (var (- vitesse, 0,2) * 1s) calc ((var (- pas-de-retard) * var (- retard, 0,2)) * 1s);
}

Il s'agit en effet de nombreux calc pour inverser transition-delay . Mais ?a marche! Nous devons nous rappeler de garder à jour --no-of-steps !

Nous avons une autre option. Alors que nous continuons sur l'itinéraire "Pure CSS", nous allons éventuellement utiliser l'astuce de case pour changer l'état plié. Nous pouvons avoir deux ensembles de "étapes" définies, dont l'une est active lorsque notre case est sélectionnée. C'est certainement une solution plus verbeuse. Cependant, cela nous permet de contr?ler plus granulaire.

 /* Pli*/
: vérifié ~ .scene .package__side - Extra {
  --Step: 1;
}
/* Développer*/
.Package__side - Extra {
  --Step: 15;
}

Taille et centre

Avant de renoncer à dat.gui dans la démo, ajustez la taille du package. Nous voulons vérifier si notre colis reste centré lorsqu'il est plié et retourné. Dans cette démo, l'emballage a une --height plus grande, tandis que .scene a une bordure en pointillés.

Nous pourrions aussi bien ajuster notre transformation pour mieux centrer le package:

 / * Considérons la hauteur du package par traduction sur l'axe z * /
.scène {
  transformée: rotatex (calc (var (- rotate-x, -24) * 1deg)) rotatey (calc (var (- rotate-y, -32) * 1deg)) rotatex (90deg) tradlate3d (0, 0, calc (var (- height, 20) * -0,5vmin));
}
/ * Considérons la profondeur d'enveloppe en glissant la profondeur avant de retourner * /
.Package__wrapper {
  transform: tradlater (0, calc ((var (- packaged, 0) * var (- profondeur, 20)) * -1vmin));
}

Cela nous donne un effet de centrage fiable dans la scène. Mais tout dépend de la préférence personnelle!

Conseils pour ajouter des cases à cocher

Maintenant, débarrassons-nous de dat.gui et faisons-le "pur" CSS. Pour ce faire, nous devons introduire un tas de contr?les dans HTML. Nous utiliserons une case à cocher pour s'effondrer et développer notre colis. Nous utiliserons ensuite un bouton radio pour sélectionner la taille du package.

 <label for="one">S</label>

<label for="two">M</label>

<label for="three">L</label>

<label for="four">Xl</label>

<input type="checkbox" id="package">
<label for="package" class="open">Ouvrir le colis</label>
<label for="package" class="close">Fermez le colis</label>

Dans la démo finale, nous masquerons l'entrée et utiliserons l'élément de balise. Mais, maintenant, rendons-les tous visibles en premier. L'astuce consiste à utiliser le combinateur de frères et s?urs (~) lorsque certaines commandes sont sélectionnées. Nous pouvons ensuite définir la valeur de propriété personnalisée sur .scene .

 #Package: vérifié ~ .Scene {
  - emballé: 1;
}
#one: vérifié ~ .Scene {
  - Height: 10;
  - VWIDTH: 20;
  - Depth: 20;
}
#two: vérifié ~ .Scene {
  - Height: 20;
  - VWIDTH: 20;
  - Depth: 20;
}
# trois: vérifié ~ .Scene {
  - Height: 20;
  - VWIDTH: 30;
  - Depth: 20;
}
#four: vérifié ~ .Scene {
  - Height: 30;
  - VWIDTH: 20;
  - Depth: 30;
}

Voici une démo avec cette fonctionnalité!

Vernis final

Maintenant, nous pouvons rendre les choses "jolies" et ajouter des détails supplémentaires. Machons d'abord toutes les entrées.

 saisir {
  Position: fixe;
  en haut: 0;
  à gauche: 0;
  Largeur: 1px;
  hauteur: 1px;
  rembourrage: 0;
  marge: -1px;
  débordement: caché;
  Clip: rect (0, 0, 0, 0);
  Espace blanc: Nowrap;
  largeur de bordure: 0;
}

Nous pouvons définir l'option de taille sur le bouton circulaire:

 .Size-label {
  Position: fixe;
  en haut: var (- en haut);
  à droite: 1rem;
  Z-Index: 3;
  Font-Family: Sans-Serif;
  Police-poids: Bold;
  Couleur: # 262626;
  hauteur: 44px;
  Largeur: 44px;
  Affichage: grille;
  Items de lieu: Centre;
  Contexte: #fcfcfc;
  Border-Radius: 50%;
  curseur: pointeur;
  Border: 4px solide # 8BB1B1;
  transformée: traduire (0, calc (var (- y, 0) * 1%)) échelle (var (- échelle, 1));
  transition: transformer 0,1 s;
}
.Size-label: Hover {
  --Y: -5;
}
.Size-label: actif {
  --Y: 2;
  - échelle: 0,9;
}

Nous voulons pouvoir cliquer n'importe où pour changer le pliage et l'expansion du package. Par conséquent, nos balises .open et .close occuperont l'ensemble de l'écran. Vous voulez savoir pourquoi nous avons deux étiquettes? C'est un petit truc. Si nous utilisons transition-delay et zoomez sur la balise correspondante, nous pouvons masquer deux balises lorsque le package est converti. C'est ainsi que nous nous battons contre les clics de spam (bien que cela n'empêchera pas les utilisateurs d'appuyer sur la barre d'espace sur le clavier).

 .fermer,
.ouvrir {
  Position: fixe;
  Hauteur: 100VH;
  Largeur: 100 VW;
  Z-Index: 2;
  Transformée: échelle (var (- échelle, 1)) traduire3d (0, 0, 50vmin);
  transition: transform 0s var (- révéler-delay, calc ((var (- no-thes, 15) 1) * var (- retard, 0,2)) * 1s));
}

#Package: vérifié ~ .Close,
.ouvrir {
  - échelle: 0;
  - Reveal-Delay: 0S;
}
#Package: vérifié ~ .Open {
  - échelle: 1;
  - Reveal-Delay: calc ((var (- no-thes, 15) 1) * var (- retard, 0,2)) * 1s);
}

Consultez cette démo pour voir où nous avons ajouté background-color en .open et .close . Pendant la conversion, aucune étiquette n'est visible.

Nous avons déjà des fonctionnalités complètes! Cependant, notre package est un peu fade en ce moment. Ajoutons des détails supplémentaires pour le faire ressembler davantage à une "bo?te" telle que les étiquettes de ruban adhésif et d'emballage.

Des détails comme celui-ci ne sont limités que par notre imagination! Nous pouvons utiliser notre propriété personnalisée --packaged pour influencer quoi que ce soit. Par exemple, .package__tape est en train de convertir la transformation scaleY :

 .Package__tape {
  Transform: tradlate3d (-50%, var (- offset-y), -2px) scalex (var (- emballé, 0));
}

Il convient de noter que chaque fois que nous ajoutons de nouvelles fonctionnalités qui affectent la séquence, nous devons mettre à jour nos étapes. Non seulement --step , mais aussi --no-of-steps .

C'est tout!

C'est comment créer une commutation de colis CSS 3D pure. Le mettriez-vous sur votre site Web? Peu probable! Cependant, c'est amusant de voir que vous pouvez implémenter ces choses avec CSS. Les propriétés personnalisées sont très puissantes.

Pourquoi ne pas célébrer et offrir un cadeau pour CSS!

Restez bien! ? ? ? ? ?

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!