Comment créer des animations de bouton 3D avec CSS
Flip animations sont des effets CSS populaires qui montrent à l'avant et à l'arrière d'un élément HTML en les tournant de haut en bas ou de gauche à droite (et inversement). Ils sont radiaux en 2 dimensions, mais ils sont encore plus froids en 3D.
Dans ce post, je vais vous montrer comment créer des boutons 3D simples, et ajouter des animations de retournement pour eux.
Vous pouvez voir le résultat sur la démo ci-dessous, si vous cliquez sur les boutons, ils effectueront l'animation flip étiquetée.
1. Création du code HTML pour le bouton 3D
Pour créer un bouton 3D (avec Top → Bottom Flip), nous empilons d’abord trois Nous avons mis le Nous ajoutons des images d'arrière-plan aux faces des boutons avant et arrière, et définissons un dégradé linéaire froid derrière les images pour les deux. L'astuce ici est qu'en CSS, vous pouvez définir plusieurs images en tant qu'image d'arrière-plan pour le même élément et vous pouvez également déclarer des dégradés en tant qu'images d'arrière-plan.. La face du milieu, À couvrir l'espace entre les faces avant et arrière avec celle du milieu, nous poser la face médiane à plat à travers le plan des x de l’espace 3D en utilisant le Étant donné que la face médiane a été posée à plat sur le plan x, son point le plus haut sur l'axe des ordonnées descend de 10 px (la moitié de sa hauteur) par rapport à l'original. Donc, pour le remonter et aligner son sommet avec les deux autres faces des boutons, j’ai ajouté le J'ai utilisé le Jusqu'à présent, vous ne verrez que la face avant sur l'écran, le plan x étant masqué, et sur le plan y (écran), la dernière face posée était la face avant.. En tournant le bouton vous pourrez aussi voir les autres visages. La propriété CSS de type transformation détermine si les éléments enfants d'un élément HTML sont affichés à plat ou positionnés dans l'espace 3D. Dans l'extrait de code ci-dessous, le Notez que j'ai utilisé Cependant, dans la prochaine étape, nous allons le changer pour À ce stade, notre bouton 3D n'est toujours pas animé. Nous pouvons le faire en utilisant le Faisons en sorte que le bouton ne tourne qu'en survol, alors au lieu de Notez que dans le repo Github, je ajouté une case à cocher à chaque bouton afin de lancer l'animation sur .flipBtn conteneur qui fonctionnera comme le bouton 3D, et nous plaçons le bouton 3D dans le .flipBtnWrapper emballage.
2. Ajouter des styles de base avec CSS
largeur et la taille les propriétés du wrapper, du bouton et des faces du bouton et les positionner à l'aide de la technique de positionnement relatif / absolu. .flipBtnWrapper width: 200px; hauteur: 200px; position: relative; .flipBtn, .flipBtn_face width: 100%; hauteur: 100%; position: absolue;
3. Stylisez les 3 faces des boutons
.flipBtn_mid, est donné un la taille 20px et un même espace de 20px est créé entre les faces avant et arrière. Nous réalisons ce dernier en utilisant le translateZ () Fonction CSS qui déplace un élément le long de l'axe z. Nous repoussons la face arrière de 10px et la face avant de 10px. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), dégradé linéaire (# FF6366 50%, # FEA56E); visibilité face arrière: masquée; transformer: translateZ (10px); .flipBtn_back background-image: url ("image / css-3d-flip-animation-pause.png"), linear-gradient (# FF6366 50%, # FEA56E); couleur de fond: bleu; transformer: translateZ (-10px); .flipBtn_mid height: 20px; couleur de fond: # d5485a; transformer: rotateX (90deg); en haut: -10px; transformer: rotateX (90deg); règle que le rend perpendiculaire sur les faces avant et arrière du bouton dans le plan y.en haut: -10px règle aussi.visibilité arrière Propriété CSS pour la face avant, donc quand on retourne le bouton, l'arrière de la face avant ne sera pas visible.
4. Tourner le bouton
transformer-style: preserve-3d; règle donne le volume 3D à notre bouton, tandis que la transformer: rotatexX () la propriété tourne autour de l'axe des x. .flipBtn transform-style: preserve-3d; transformation: rotateX (-120deg);
-120deg uniquement à des fins de démonstration, il est ainsi plus facile d'illustrer le fonctionnement de la rotation des boutons.
-180deg faire tourner le bouton complètement.5. Animation du bouton
transition propriété. Nous utilisons le transformer propriété pour la première valeur, car il s'agit de la propriété pour laquelle vous souhaitez appliquer l'effet de transition. La deuxième valeur, est la durée, 2s..flipBtn sélecteur, utilisons .flipBtnWrapper: survolez .flipBtn. Comme mentionné précédemment, changez également la valeur de rotationX () à -180deg faire tourner le bouton. .flipBtn transition: transform 2s; transformer-style: preserve-3d; .flipBtnWrapper: survolez .flipBtn transform: rotateX (-180deg);
:vérifié plutôt que sur :flotter, De cette façon, il se comporte davantage comme un vrai bouton. J'ai également inclus quatre boutons différents avec quatre directions d'inversion (Haut → Bas, Bas → Haut, Droite → Gauche et Gauche → Droite), de sorte que vous puissiez facilement utiliser ce que vous voulez..
