编程知识 cdmana.com

Quelques lignes de css pour rendre votre page tridimensionnelle

Commençons par un exemple simple que nous utilisons dans nos produits:

Code d'interface

Ce genre d'animation comme Flip Poker passe complètement par CSS Réalisation,Et le vrai noyau ne concerne que trois attributs simples perspective, transform, backface-visibility,Dans la section suivante de l'article,Je vais passer par des exemples et les expliquer étape par étape.

1. Rotation normale

Tout le monde sait,css3 De transform Les attributs permettent une déformation visuelle de l'élément,Il contient des opérations de rotation(Rotate):

@keyframes rotateX {
  0% { transform: rotateX(0) }
  100% { transform: rotateX(360deg) }
}
@keyframes rotateY {
  0% { transform: rotateY(0) }
  100% { transform: rotateY(360deg) }
}
@keyframes rotateZ {
  0% { transform: rotateZ(0) }
  100% { transform: rotateZ(360deg) }
}

.container {
  .z-rotateX {
    animation: rotateX 10s linear infinite;
  }
  .z-rotateY {
    animation: rotateY 10s linear infinite;
  }
  .z-rotateZ {
    animation: rotateZ 10s linear infinite;
  }
}

 Rotation normale

La démo et le code source peuvent être vus ici. : https://codepen.io/mongooseso...

Je vais vous montrer. RotateX、RotateY、RotateZ Rotation 360° Effets d'animation pour, Mais l'effet est plat. , Ce n'est peut - être pas facile à comprendre. .Ci - dessous, nous Détaillons l'effet dynamique de la stéréo.

2. Rotation stéréoscopique

Une seule ligne a été ajoutée CSSDe Effets secondaires:

.container {
  perspective: 800px;
  // ......
}

 Rotation stéréoscopique

La démo et le code source peuvent être vus ici. : https://codepen.io/mongooseso...

En fait..., Nous n'avons ajouté que perspective:800px Cette ligne de code.

Alors perspective Qu'est - ce que ça veut dire??

L'explication officielle est :perspective Les observateurs et z=0 Distance du plan ,Faire en sorte que les éléments avec des transformations de position 3D produisent un effet de perspective.
Nous pouvons le comprendre très simplement comme suit: , Du point de vue de l'écran ,Avec3D Distance du conteneur de l'élément .perspective Plus le réglage est petit , Vous regardez à l'écran 3D Plus on se sent proche ,Plus le réglage est grand, Plus vous vous éloignez . Lorsque cette propriété existe ,Cela signifie que tous les éléments enfants sous cet élément sont tridimensionnels.

Par défaut, Est centré sur l'élément ,On peut comprendre que vous regardez au centre de l'élément, Si vous devez changer de perspective ,Peut être utilisé perspective-origin Cette propriété.

3. Système de coordonnées du Navigateur

Il y a une question à poser. ,RotateX、Y、Z Comment ça tourne? ?

Système de coordonnées du Navigateur , Horizontalement à droite XAxe positif, Verticalement vers le bas YAxe positif, L'écran vertical vers l'extérieur est ZAxe positif.

Par exemple,,transform: rotateX(45deg) Indique que le Centre de rotation est XAxe,Tourner dans le sens des aiguilles d'une montre45Degré. Si le paramètre est négatif , C'est dans le sens contraire des aiguilles d'une montre. .
Au moment de l'identification , Nous pouvons utiliser la règle de gauche , C'est - à - dire que le pouce gauche pointe dans la direction positive de l'axe correspondant ,Les autres doigts sont pliés dans le sens des aiguilles d'une montre.

Pour faciliter la compréhension, J'ai trouvé deux photos pour illustrer

 Prévision de la direction de rotation de l'image flèches

On a la main gauche en face. XAxe positif, La direction de flexion du doigt est vers YAxe positif, On peut supposer ,Rotation45 L'effet du degré est :

Insérer la description de l'image ici

Conseils d'amitié:Ne vous moquez pas des règles de la main gauche de vos collègues, Si la course ,Ne jamais utiliserYAxial. Si vous l'utilisez vraiment , Parlez - moi de l'hôpital. Wi-Fi D'accord, d'accord..
C'est pour ça qu'on l'utilise. RotateX,Y,Z Tu comprends? ,En même temps RotateZ Ça n'arrive pas. 3D La raison de l'effet est compréhensible. .

4. Effet Flip

Comme l'effet de flip mentionné au début ,Comment cela a - t - il été réalisé??

Ça dit: perspective Est valable pour les éléments enfants , Donc nous avons besoin d'un supplément cards Conteneur,Deux. div Représente respectivement l'avant et l'arrière .

<div class="container">
  <div class="cards">
    <div class="card frontface" />
    <div class="card backface" />
  </div>
</div>
  • Propriétés communes de la carte

C'est évident., Les cartes doivent être spécifiées à l'avant et à l'arrière position: absolute, Pour que les cartes soient superposées . Vous devez également préciser , Le deuxième attribut important de cet article backface-visibility:hidden, Cette propriété est très bien comprise .

Lorsqu'un élément spécifie rotateY(180deg) Après, Selon les règles de gauche , Élément orienté vers l'intérieur , Le dos contre nous. , Si nous avons spécifié cette propriété ,C'est - à - dire que nous n'avons plus besoin d'éléments visibles.

.card {  
  position: absolute;
  top: 0;
  backface-visibility: hidden;
}
  • Face avant de la carte

Aucun traitement spécial n'est nécessaire sur le côté avant de la carte .

  • Dos de la carte

Désignation transform: rotateY(180deg) C'est tout..

.backface {
  transform: rotateY(180deg);
}
  • cardsBloc

Apparemment.,Nous devons donnercards Ajout de blocs transition:transform Attributs pour augmenter l'animation ,De plus, nous devons utiliser la troisième propriété de cet articletransform-style: preserve-3d.

Cette valeur de propriété représente , Tous les éléments enfants sous cet élément sont dans 3DDans l'espace, Il existe une hiérarchie tridimensionnelle et une relation de couverture ,S'il y a plusieurs éléments à l'intérieur de votre contenant qui se chevauchent3D Au moment de la transformation , Cette valeur de propriété est requise .

.cards {
  transition: transform 1s;
  transform-style: preserve-3d;
}
  • container Bloc
    Enfin, En tant que conteneur ultrapériphérique ,Il suffit de définir perspective Faire tourner les éléments enfants en stéréo , Des paramètres supplémentaires sont nécessaires position: relative De l'intérieur absolute Élément générer un ancrage de référence .

    .container {
    perspective: 800px;
    position: relative;
    } 

Un exemple simple

Flip

Code source détaillé et DemoIci: https://codepen.io/mongooseso...

5. Cube magique 3D

Vous l'avez peut - être découvert. ,webpack Site officiel logo Ça marche. CSS Manuscrit, Alors parlons un peu. , Comment combiner les attributs existants , Réaliser la rotation d'un cube .

Le carré

Commencez par le code complet et Demo: https://codepen.io/mongooseso...

  • HTMLFormat
    Similaire à la carte ,La nôtre.HTML La forme est approximativement la suivante:

    <div class="container">
    <div class="cubes">
      <div class="cube front" />
      <div class="cube back" />
      <div class="cube top" />
      <div class="cube bottom" />
      <div class="cube left" />
      <div class="cube right" />
    </div> 
    </div>
  • Style du composant parent
    Comme les cartes. , Nous avons besoin de cubes Récipients et extrémités extérieures container Configuration du conteneur3D Propriétés du point de vue

    .cubes {
    transform-style: preserve-3d;
    transition: transform 1s;
    width: 100%;
    height: 100%;
    }
    .container {
    position: relative;
    perspective: 400px;
    width: 200px;
    height: 200px;
    }

    Ici, nous définissons la longueur latérale du carré comme suit: 200px,Par400px Pour voir

  • Dessiner six faces

Si vous avez déjà joué au Rubik's Cube, vous savez peut - être , Pour enregistrer la rotation du Rubik's Cube ,En général, nous nommons les six faces d'un carré comme avant、Après、Gauche.、A droite、Allez.、En bas.:

Le carré

Sauf que le côté avant n'a pas besoin d'être modifié. ,Les autres faces peuvent être considérées comme le résultat de différentes rotations du côté avant

Après:Le long deYRotation de l'arbre dans le sens des aiguilles d'une montre180deg

.back {
  transform: rotateY(180deg)
}

Gauche.:Le long deYRotation de l'arbre dans le sens contraire des aiguilles d'une montre90deg( Pensez à la raison pour laquelle c'est dans le sens contraire des aiguilles d'une montre. )

.left {
  transform: rotateY(-90deg)
}

A droite:Le long deYRotation de l'arbre dans le sens des aiguilles d'une montre90deg

.right {
  transform: rotateY(90deg)
}

Allez.:Le long deXRotation de l'arbre dans le sens des aiguilles d'une montre90deg

.top {
  transform: rotateX(90deg)
}

En bas.:Le long deXRotation de l'arbre dans le sens contraire des aiguilles d'une montre90deg

.bottom {
  transform: rotateX(-90deg)
}

Nous pouvons marquer différents visages avec des couleurs de fond et des motifs pour distinguer,Les six faces se croisent encore, Nous devons continuer “Emplacement”Ajustement

  • Six faces combinées

In Demo Moyenne, Nous définissons la longueur latérale du carré à 200px,.Et les six faces se chevauchent au Centre du carré, Donc nous avons besoin de définir chaque face translateZ(100px) Permet un réglage correct de la position du carré ,Par exemple, le dos est ajouté pour devenir ce style

.back {
  transform: rotateY(180deg) translateZ(100px);
}
  • Dessiner des effets dynamiques

Ensuite, c'est simple, Nous pouvons dessiner n'importe quel effet dynamique sur un carré ,Intéressant peut même être dessiné plus loin comme le processus de perturbation et de restauration du cube magique.

6. Scénarios pratiques

Utiliser CSS Pour réaliser 3D L'effet n'est pas une nouvelle technologie de navigateur depuis longtemps ,Mais il y a encore très peu d'applications dans les produits réels, Une bonne dynamique améliore l'expérience du produit ,Au contraire, les effets dynamiques complexes entraînent une fatigue esthétique et un fardeau de développement.
WebGL Et D3.js Attends, c'est une bonne chose. ,Mais leurs coûts d'apprentissage et de développement sont élevés,Il faut beaucoup d'énergie pour voir les récompenses réelles, Et moins de scénarios d'application .
Donc si vous voulez vous en débarrasser, 2B Ajout, suppression et modification ennuyeux dans la scène ,2CSous scèneH5 Une interaction ennuyeuse ,Utilisez - le avec audace à un coût très faible CSS 3D

The End

Si vous pensez que cet article vous aidera, C'est instructif. , J'aimerais que tu m'aides. 2 Un petit service. :
1、Commande.「Oui.」, Rendre cet article accessible à un plus grand nombre de personnes ;
2、Attention au numéro public「 Peaux de haricots 」,Réponse de fond du numéro public「Ajouter un groupe」 Joignez - vous à nous pour étudier ensemble ;

Mettre l'accent sur le bien - être du public mise à jour continue , Documents d'étude envoyés par le public :
1、Réponse de fond du numéro public「vis」,Plus de visualisation du matériel d'apprentissage gratuit disponible.
2、Réponse de fond du numéro public「webgl」,Il est également disponiblewebgl Matériel pédagogique gratuit .
3、Réponse de fond du numéro public「Algorithmes」, Les données d'apprentissage de l'algorithme peuvent également être obtenues .

版权声明
本文为[Peaux de haricots]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914165814421i.html

Scroll to Top