Comment créer des animations de bouton 3D Flip avec CSS

s l'un sur l'autre, deux pour les faces avant et arrière du bouton, et un troisième pour remplir la profondeur au milieu. Nous mettons les trois faces de boutons dans le conteneur .flipBtn qui fonctionnera comme le bouton 3D, et nous .flipBtnWrapper le bouton 3D dans le wrapper .flipBtnWrapper .

2. Ajouter des styles de base avec CSS

Nous définissons les propriétés width et height du wrapper, du bouton et des faces du bouton, et les positionnons en utilisant la technique de positionnement relatif / absolu.

 .flipBtnWrapper {largeur: 200px; hauteur: 200px; position: relative; } .flipBtn, .flipBtn_face {largeur: 100%; hauteur: 100%; position: absolue; } 

3. Style des 3 faces de bouton

Nous ajoutons des images d'arrière-plan aux faces des boutons avant et arrière et définissons un dégradé linéaire frais derrière les images pour les deux. L'astuce ici est que dans CSS, vous pouvez définir plusieurs images comme image de fond pour le même élément, et vous pouvez également déclarer des dégradés comme images d'arrière-plan.

La face du milieu, .flipBtn_mid, a une height de 20px et un espace de 20px est créé entre les faces avant et arrière. Nous obtenons ce dernier en utilisant la fonction CSS translateZ() 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-bouton-animation-play.png"), gradient linéaire (# FF6366 50%, # FEA56E); backface-visibilité: caché; transformer: translateZ (10px); } .flipBtn_back {background-image: url ("image / css-3d-flip-bouton-animation-pause.png"), gradient linéaire (# FF6366 50%, # FEA56E); couleur de fond: bleu; transformer: translateZ (-10px); } .flipBtn_mid {height: 20px; couleur de fond: # d5485a; transformer: rotateX (90deg); haut: -10px; } 

Pour couvrir l'espace entre les faces avant et arrière avec le milieu, nous plaçons la face centrale à plat sur le plan X de l'espace 3D en utilisant la transform: rotateX(90deg); règle qui le rend perpendiculaire à la fois les faces des boutons avant et arrière sur le plan y.

Comme la face centrale a été posée à plat sur le plan X, son point haut sur l'axe des y descend de 10px (la moitié de sa hauteur) de l'original. Donc, pour le remonter et aligner son sommet avec les deux autres faces du bouton, j'ai ajouté la règle du top: -10px aussi.

J'ai utilisé la propriété CSS backface-visibility pour la face avant, donc lorsque nous retournons le bouton, l'arrière de la face avant ne sera pas visible.

Jusqu'à présent, vous ne voyez que la face avant sur l'écran, car le plan X est caché de la vue, et sur le plan y (écran), la dernière face posée était l'avant. En tournant le bouton, vous pourrez également voir les autres visages.

4. Tourner le bouton

La propriété CSS transformer-style 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 transform-style: preserve-3d; La règle donne un volume 3D à notre bouton, tandis que la propriété transform: rotatexX() fait pivoter autour de l'axe des x.

 .flipBtn {transform-style: preserve-3d; transformer: rotateX (-120deg); } 

Notez que j'ai utilisé -120deg uniquement à des fins de démonstration, car il est ainsi plus facile d'illustrer le fonctionnement de la rotation des boutons.

Cependant, dans la prochaine étape, nous allons le changer à -180deg pour faire tourner le bouton complètement.

5. Animation du bouton

À ce stade, notre bouton 3D n'est toujours pas animé. Nous pouvons le faire en utilisant la propriété de transition . Nous utilisons la propriété transform pour la première valeur, car c'est la propriété pour laquelle nous voulons appliquer l'effet de transition. La deuxième valeur, est la durée, 2s .

Faisons en sorte que le bouton ne tourne que sur hover, donc au lieu du sélecteur .flipBtn, utilisons .flipBtnWrapper:hover .flipBtn . Comme mentionné précédemment, modifiez également la valeur de rotateX() à -180deg pour que le bouton -180deg .

 .flipBtn {transition: transformer 2s; transformer-style: préserver-3d; } .flipBtnWrapper: hover .flipBtn {transformer: rotateX (-180deg); } 

Notez que dans le repo Github, j'ai ajouté une case à cocher à chaque bouton afin de déclencher l'animation :checked plutôt que sur :hover, de cette façon elle se comporte plus comme un vrai bouton. J'ai également inclus quatre boutons différents avec quatre directions flip (Haut → Bas, Bas → Haut, Droite → Gauche et Gauche → Droite), de sorte que vous pouvez facilement utiliser celui que vous voulez.

• Voir la démo
• Source de téléchargement