Début 3d de CSS3
Pour jouer la 3D de CSS3, vous devez comprendre plusieurs vocabulaires, à savoir la perspective, la rotation et la traduction. La perspective signifie regarder des choses 2D à l'écran d'une perspective réaliste, montrant ainsi l'effet de la 3D. La rotation n'est plus une rotation sur le plan 2D, mais une rotation d'un système de coordonnées tridimensionnel, y compris l'axe X, l'axe y et la rotation de l'axe z. Il en va de même pour la traduction.
Bien sûr, en utilisant la théorie pour illustrer, vous ne comprenez probablement pas. Voici 3 GIF:
Tourner le long de l'axe X
Tourner le long de l'axe y
Tourner le long de l'axe z
Il ne devrait pas y avoir de problème avec la rotation, il est donc plus facile de comprendre la traduction, c'est-à-dire déplacer l'axe x, l'axe y et l'axe z.
Vous pouvez dire que la perspective est difficile à comprendre. Permettez-moi d'introduire plusieurs attributs de perspective.
perspective
Le nom anglais de la perspective est la perspective. Sans cette chose, il n'y a aucun moyen de former un effet 3D. Mais comment cette chose permet-elle à notre navigateur de former un effet 3D? Vous pouvez regarder l'image ci-dessous. En fait, ceux qui ont appris la peinture devraient connaître la relation de perspective, et c'est la raison.
Mais dans CSS, il a des valeurs numériques, par exemple, que représente 1000px? Nous pouvons comprendre de cette façon que si nous regardons directement l'objet, l'objet sera écrasant et occupera notre vue. Notre distance par rapport à cela devient de plus en plus petite, et le sens tridimensionnel apparaîtra. En fait, cette valeur construit la distance entre nos yeux et l'écran, qui construit également une illusion 3D virtuelle.
Origine en perspective
D'après ce qui précède, nous comprenons la perspective et ajoutant ce qu'est cette origine. Celui que nous avons mentionné plus tôt est la distance de l'objet, et c'est la ligne de vue des yeux. Les différentes positions de notre point de vue déterminent les différentes scènes que nous voyons. La valeur par défaut est le centre, qui est l'origine en perspective: 50% 50%. La première valeur est l'axe x sur lequel l'élément 3D est basé, et la deuxième position est définie sur l'axe y.
Lors de la définition d'un attribut d'origine perspective pour un élément, ses éléments enfants obtiennent des effets de perspective, pas l'élément lui-même. Doit être utilisé avec l'attribut Perspective et affecte uniquement les éléments de conversion 3D. (W3School)
de style transform
La perspective est de nouveau là. Oui, c'est la clé de la 3D dans CSS. Le style transform est plat par défaut. Si vous souhaitez voir l'effet 3D sur les éléments, vous devez utiliser le style Transform: Preserve-3D, sinon c'est juste une transformation du plan, pas une transformation 3D.
Vous emmener jouer avec CSS3-3D étape par étape
Nous avons un peu de compréhension du concept ci-dessus, alors commençons le combat réel ci-dessous!
Regardons l'effet, n'est-ce pas cool: visitez directement https://bupt-hjm.github.io/css3-3d/, si vous pensez que c'est OK, n'oubliez pas de le donner à Star HH
Étape 1: structure HTML
Un récipient très simple est enveloppé d'une pièce contenant 6 pièces
<div> <div> <div> </ div> <div> </ div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <v> </div> </div> </div>
Étape 2: Ajouter les attributs 3D nécessaires pour entrer dans le monde 3D
Grâce à l'explication ci-dessus, vous devriez être plus familier avec la perspective.
/*Container*/.Container {-Webkit-Perspective: 1000px; -Moz-Perspective: 1000px; -MS-Perspective: 1000px; Perspective: 1000px;} / * Pièce Box * / .piece-box {Perspective-Origin: 50% 50%; -Webkit-Transform-style: Preserve-3d; -Moz-Transform-style: Preserve-3d; -mS-transform-style: Preserve-3d; style transform: préserve-3d;}Étape 3: Ajouter les styles nécessaires
/*Container*/.Container {-Webkit-Perspective: 1000px; -Moz-Perspective: 1000px; -MS-Perspective: 1000px; Perspective: 1000px;} / * Pièce Box * /. Pièce-box {position: relative; Largeur: 200px; hauteur: 200px; marge: 300px automatique; Origine en perspective: 50% 50%; -Webkit-Transform-style: Preserve-3d; -Moz-Transform-style: Preserve-3d; -mS-transform-style: Preserve-3d; style transform: Preserve-3d;} / * Pièce Style général * /. Piece {Position: Absolute; Largeur: 200px; hauteur: 200px; Contexte: rouge; Opacité: 0,5;}. Piece-1 {Background: # ff6666;}. Piece-2 {Background: # fff00;}. Piece-3 {Background: # 006699;}. Piece-4 {Background: # 009999;}.Bien sûr, après avoir terminé cette étape, vous ne voyez toujours qu'un carré, qui est notre pièce-6, car notre transformée 3D n'a pas encore commencé
Étape 4: attaque de transformation 3D
La première chose est de réaliser la lanterne tournante. Nous ne devons pas le laisser partir en premier, réaliser la partie légère.
Comment y parvenir? Parce que pour former un cercle, le cercle est à 360 degrés et nous avons 6 pièces, alors, il est facile de penser que nous devons faire pivoter chaque pièce dans un incrément de 60 degrés, et cela devient comme suit
Comment les retirer du centre?
Ici, nous devons également noter qu'après avoir tourné l'élément autour de l'axe Y, l'axe x et z tournera réellement, de sorte que la ligne verticale de chaque face du cube est toujours l'axe z. Nous devons seulement modifier la valeur de Translatez. Lorsque Translatez est positif, nous marchons dans notre direction, afin que nous puissions le séparer.
Mais comment mesurer la distance?
Est-ce clair en un coup d'œil?
Modifions CSS
.Piece-1 {Background: # ff6666; -Webkit-Transform: Rotatey (0Deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -o-transform: Rotatey (0Deg) Translatez (173.2px); Transform: Rotatey (0Deg) Translatez (173.2px);}. Piece-2 {Background: # fff00; -Webkit-Transform: Rotatey (60Deg) Translatez (173.2px); -ms-transform: Rotatey (60Deg) Translatez (173.2px); -o-transform: Rotatey (60Deg) Translatez (173.2px); Transform: Rotatey (60Deg) Translatez (173.2px);}. Piece-3 {Background: # 006699; -Webkit-Transform: Rotatey (120Deg) Translatez (173.2px); -ms-transform: Rotatey (120Deg) Translatez (173.2px); -o-transform: Rotatey (120Deg) Translatez (173.2px); -o-transform: Rotatey (120Deg) Translatez (173.2px); Transform: Rotatey (120Deg) Translatez (173.2px);}. Piece-4 {Background: # 009999; -Webkit-Transform: Rotatey (180Deg) Translatez (173.2px); -ms-transform: Rotatey (180Deg) Translatez (173.2px); -o-transform: Rotatey (180Deg) Translatez (173.2px); Transform: Rotatey (180Deg) Translatez (173.2px);}. Piece-5 {Background: # ff0033; -Webkit-Transform: Rotatey (240Deg) Translatez (173.2px); -ms-transform: Rotatey (240Deg) Translatez (173.2px); -o-transform: Rotatey (240Deg) Translatez (173.2px); Transform: Rotatey (240Deg) Translatez (173.2px);}. Piece-6 {Background: # ff6600; -Webkit-Transform: Rotatey (300Deg) Translatez (173.2px); -ms-transform: Rotatey (300Deg) Translatez (173.2px); -o-transform: Rotatey (300Deg) Translatez (173.2px); Transform: Rotatey (300Deg) Translatez (173.2px);}La lanterne tournante a-t-elle été réalisée?
Étape 5: L'animation fait bouger la 3D
Pour réaliser la lanterne en mouvement, c'est en fait très simple. Nous avons juste besoin d'ajouter une animation de rotation à la pièce. Complétez l'animation en 5 secondes, tournez de 0 degrés à 360 degrés
/ * Pièce Box * /. Piece-box {position: relative; Largeur: 200px; hauteur: 200px; marge: 300px automatique; Origine en perspective: 50% 50%; -Webkit-Transform-style: Preserve-3d; -Moz-Transform-style: Preserve-3d; -mS-transform-style: Preserve-3d; style transform: Preserve-3d; Animation: coérarotate 5S; -moz-animation: ponceerotate 5S; / * Firefox * / -webkit-animation: ponceerotate 5s; / * Safari et chrome * / -o-animation: ponceerotate 5s; / * Opera * /} / * Animation de lampe tournante * / @ Keyframes Pimeerotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); Transform: Rotatey (0Deg);} 100% {-webkit-transform: Rotatey (360Deg); -ms-transform: Rotatey (360DEG); -o-transform: Rotatey (360DEG); Transform: Rotatey (360Deg);}} / * Firefox * / @ - Moz-KeyFrames Pisonerotate {0% {-webkit-transform: Rotatey (0deg); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); Transform: Rotatey (0Deg);} 100% {-webkit-transform: Rotatey (360Deg); -ms-transform: Rotatey (360DEG); -o-transform: Rotatey (360DEG); Transform: Rotatey (360Deg);}} / * safari et chrome * / @ - webkit-keyframes coqueotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); Transform: Rotatey (0Deg);} 100% {-webkit-transform: Rotatey (360Deg); -ms-transform: Rotatey (360DEG); -o-transform: Rotatey (360DEG); Transform: Rotatey (360Deg);}} / * Opera * / @ - o-keyframes coqueotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); Transform: Rotatey (0Deg);} 100% {-webkit-transform: Rotatey (360Deg); -ms-transform: Rotatey (360DEG); -o-transform: Rotatey (360DEG); Transform: Rotatey (360Deg);}}Je ne mettrai pas les GIF ici ~ HHH obtient-il des effets sympas? Ce n'est pas encore fini ~ Assemblage de cubes plus cool
Il n'est en fait pas difficile de mettre en œuvre un cube. Je n'entrerai pas dans les détails ici. Vous pouvez d'abord imaginer un visage, puis développer d'autres visages pour le mettre en œuvre. Par exemple, nous mettons le front Translatez (100px) du cube près de notre 100px, puis Translatez (-100px), puis l'éloignait de notre 100px. Sur la gauche est Translatex (-100px, puis Rotatey (90Deg), à droite est traduisx (100px) puis Rotatey (90Deg), en haut est traduity (-100px), Rotatex (90Deg), en bas est traduit (100px), rotatex (90Deg) et sur le bas se traduit (100x), Rotatex) et sur le bas (100px), Rotatex), et sur le bas se traduit (100px), (90deg).
CSS est le suivant. Ce qui suit n'est que la pièce1. D'autres lecteurs peuvent l'implémenter par eux-mêmes ou regarder mon code source GitHub
.Piece-1 {Background: # ff6666; -Webkit-Transform: Rotatey (0Deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -o-transform: Rotatey (0Deg) Translatez (173.2px); Transform: Rotatey (0Deg) Translatez (173.2px); Animation: pièce1rotate 5s 5s; -moz-animation: pièce1rotate 5s 5s; / * Firefox * / -webkit-animation: pièce1rotate 5s 5s; / * Safari et chrome * / -o-animation: pièce1rotate 5s 5s; / * Opéra * / -webkit-animation-fill-mode: Forwards; / * Chrome, Safari, Opera * / Animation-Filt-mode: Forwards; } / * Front * / @KeyFrames Piece1Rotate {0% {-Webkit-Transform: Rotatey (0Deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -o-transform: Rotatey (0Deg) Translatez (173.2px); Transform: Rotatey (0Deg) Translatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) tradatez (100px); -ms-transform: Rotatey (0Deg) Translatez (100px); -o-transform: Rotatey (0Deg) Translatez (100px); Transform: rotatey (0deg) tradlatez (100px);}} / * firefox * / @ -moz-keyframes pitch1rotate {0% {-webkit-transform: rotatey (0deg) translatez (100px);}} / * Firefox * / @ -moz-keyfrowe Rotatey (0Deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -o-transform: Rotatey (0Deg) Translatez (173.2px); Transform: Rotatey (0Deg) Translatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) tradatez (100px); -ms-transform: Rotatey (0Deg) Translatez (100px); -o-transform: Rotatey (0Deg) Translatez (100px); -o-transform: Rotatey (0Deg) Translatez (100px); Transform: Rotatey (0Deg) Translatez (100px); Transform: Rotatey (0Deg) Translatez (100px); Translatez (100px);}} / * safari et chrome * / @ -webkit-keyframes pièce1rotate {0% {-webkit-transform: rotatey (0Deg) translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -o-transform: Rotatey (0Deg) Translatez (173.2px); Transform: Rotatey (0Deg) Translatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) tradatez (100px); -ms-transform: Rotatey (0Deg) Translatez (100px); -o-transform: Rotatey (0Deg) Translatez (100px); transform: rotatey (0deg) tradlatez (100px);}} / * opéra * / @ -o-keyframes pitch1rotate {0% {-webkit-transform: rotatey (0deg) translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -o-transform: Rotatey (0Deg) Translatez (173.2px); -o-transform: Rotatey (0Deg) Translatez (173.2px); Transform: Rotatey (0Deg) Translatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) tradatez (100px); -ms-transform: Rotatey (0Deg) Translatez (100px); -o-transform: Rotatey (0Deg) Translatez (100px); -o-transform: Rotatey (0Deg) Translatez (100px); Transform: Rotatey (0deg) tradlatez (100px);}}Les lecteurs prudents peuvent constater que j'ai utilisé un mode d'animation-remplissage: Forward;, qui est en fait pour garder ces pièces dans l'effet d'animation finale, c'est-à-dire l'effet du cube. Les lecteurs peuvent l'essayer sans l'essayer, et il sera toujours restauré à son état d'origine.
Enfin, le cube tourne. Notre conteneur devant a déjà utilisé l'animation. Les lecteurs peuvent penser que je peux ajouter une classe et mettre un Animaiton. HHH, Animaiton couvrira l'avant, et l'animation de la lanterne avant sera partie. Donc, dans la structure HTML, j'ai ajouté une autre pièce d'emballage de boîte, comme suit
<div> <div> <div> <! - Nouveau conteneur -> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <v> </ div> <v> </ div> <v> </ div> <v> </div> <v> </div> </div> </div> </div> </div> </div> </div>
Dans l'animation, nous pouvons contrôler le temps de retard de l'animation du cube, c'est-à-dire attendre que l'assemblage du cube soit terminé avant de commencer l'animation
Animation: BoxRotate 5S 10S Infinite; Le premier 5S est la durée de l'animation, la seconde 10S est le temps de retard, puis nous avons laissé le cube tourner, de 0 degrés à 360 degrés autour de l'axe x, et également de 0 à 360 degrés autour de l'axe Y.
.Piece-box2 {-Webkit-Transform-style: Preserve-3d; -Moz-Transform-style: Preserve-3d; -mS-transform-style: Preserve-3d; style transform: Preserve-3d; Animation: BoxRotate 5S 10S Infinite; -moz-animation: boxrotate 5s 10s infini; / * Firefox * / -webkit-animation: boxrotate 5s 10s infinite; / * Safari et chrome * / -o-animation: boxrotate 5s 10s infinite; / * Opera * /} / * Cuboid Rotation Animation * / @ Keyframes BoxRotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg););); transform: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-transform: Rotatex (360Deg) Rotatey (360Deg); -o-transform: Rotatex (360Deg) Rotatey (360Deg); Transform: Rotatex (360Deg) Rotatey (360Deg);}} / * Firefox * / @ - Moz-KeyFrames Boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg););); transform: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-transform: Rotatex (360Deg) Rotatey (360Deg); -o-transform: Rotatex (360Deg) Rotatey (360Deg); Transform: Rotatex (360Deg) Rotatey (360Deg);}} / * safari et chrome * / @ - webkit-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg);); rotatex (0deg) rotatey (0deg);); transform: rotatex (0deg) rotatey (0deg););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-transform: Rotatex (360Deg) Rotatey (360Deg); -o-transform: Rotatex (360Deg) Rotatey (360Deg); Transform: Rotatex (360Deg) Rotatey (360Deg);}} / * Opera * / @ - O-KeyFrames Boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg);); transform: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-transform: Rotatex (360Deg) Rotatey (360Deg); -o-transform: Rotatex (360Deg) Rotatey (360Deg); Transform: Rotatex (360Deg) Rotatey (360DEG);}}L'effet final est terminé!
Ce qui précède sont des exemples de mise en œuvre de CSS 3D. Les étudiants dans le besoin peuvent y faire référence. Merci pour votre soutien à ce site!