Quelques lignes de css pour rendre votre page tridimensionnelle

Peaux de haricots 2021-09-15 06:47:46
quelques lignes css pour rendre


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://qdmana.com/2021/09/20210914165814421i.html

  1. Non-ASCII character ‘\xe5‘ in file kf1.py on line 4, but no encoding declared; see http://python.or
  2. 手把手教你搭建微信小程序服务器(HTTPS)
  3. sqli-labs-less-18 http头user agent+报错注入
  4. Génération de code nest pour l'outil CLI de nestjs
  5. JS | This
  6. Augmentation des variables
  7. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  8. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  9. Summary of basic knowledge points of JavaScript language (mind map)
  10. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  11. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  12. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  13. Non - ASCII character 'xe5' in file kf1.py on Line 4, but no Encoding declared;Voirhttp://python.or
  14. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  15. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  16. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  17. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  20. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  21. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  22. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  23. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  24. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  25. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  26. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  27. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  28. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  29. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  30. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  31. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  32. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  33. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  34. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  35. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  36. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  37. Basic knowledge of components in Vue "I"
  38. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  39. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  40. Want to know the implementation and application of single instance mode in the front end?
  41. Progressive react source code analysis - Implementation of ref API
  42. Webpack5 learning -- code compression
  43. Front and back end data interaction (V) -- what is Axios?
  44. Knowledge points related to react routing
  45. On demand introduction of react antd + customized theme
  46. GPG management submission signature verification
  47. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  48. After brushing the 12 sliding windows, you can tear the front end by hand
  49. Vue fruit bookkeeping - money.vue component
  50. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  51. JS contains the function code
  52. Typescript record (I)
  53. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  54. Is componentization obsolete? Introduction to micro front end architecture
  55. Leetcode day 18
  56. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  57. Design pattern -- agent pattern
  58. Vs Code theme recommendation in 2021
  59. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  60. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android