Conseils utiles

Comment créer des graphiques 3D impressionnants en CSS3

Pin
Send
Share
Send
Send


Le canal Overview a montré comment créer un cube 3D sur le service en ligne bloggif.com. Pour ce faire, cliquez sur le cube 3D et dans la fenêtre suivante, nous commençons à le créer. Pour ce faire, ajoutez cinq images. Ajouter Prenons l'exemple des ours. Nous choisissons - les premier, deuxième et troisième chiffres, remplacent les deuxième, quatrième et cinquième. Ensuite, vous devez sélectionner la vitesse de rotation. Quitter Rapide - c'est la vitesse moyenne. Vous pouvez sélectionner l'arrière-plan sur lequel le cube sera. Si vous voulez sans arrière-plan, il vous suffit de cocher la case - TRANSPARENT.

Choisissez le bleu. Et le sens de rotation. Ensuite, nous appuyons sur le bouton - CREATE MY 3 D CUBE. Ici, trois cube est prêt. Avant de télécharger, cochez la case - téléchargez sans logo et téléchargez mon Gif. Nous sélectionnons le dossier à sauvegarder, nommons le fichier et voyons ce qui s'est passé. Le résultat était un tel cube, une animation gif. C'est tout. Appliquez les connaissances acquises. Olga Taranukha était avec vous.

Pourquoi utiliser CSS?

Il existe de nombreuses façons de créer des graphiques 3D en HTML. Des solutions basées sur JS, Canvas, SVG et même WebGL sont disponibles. Elles ont toutes leurs avantages, mais il existe également des CSS.

Une solution basée sur CSS supprime les images et peut utiliser un processeur graphique pour accélérer le traitement graphique.

Aucun plugin n'est requis, et CSS peut vivre en dehors des canevas de votre page:

Les graphiques CSS 3D ne sont pas aussi optimisés que WebGL. Une rubrique distincte concerne les navigateurs incompatibles. Néanmoins, l'inclusion d'objets 3D dans les projets Web ouvre de nouveaux domaines de travail et peut être utilisée aujourd'hui.

Tous les navigateurs ne prennent pas totalement en charge les transformations 3D utilisées dans cet article. Par conséquent, j'utiliserai le préfixe -webkit.

N'oubliez pas d'inclure les préfixes pour Mozilla, Opera, MS, ainsi que les versions sans préfixes si nécessaire. Les versions CSS complètes (avec les préfixes) se trouvent dans les fichiers du projet.

Les bases: créer un cube 3D

Tout d'abord, nous allons construire un cube 3D de base en le plaçant et en l'animant dans un espace 3D. Commencez par écrire du code HTML qui représente des parties d’un cube 3D:

J'ai utilisé l'élément figure, mais vous pouvez utiliser un élément div, span ou tout autre type d'élément, à votre discrétion.

Dans ce code HTML, on distingue deux parties principales: la scène sur laquelle tout est placé et le cube placé sur la scène:

Préparation de la scène

La première chose à faire lors de la construction d'un modèle 3D est de créer un élément qui joue le rôle de scène.

Définissez la profondeur de la scène à l'aide de la propriété de perspective CSS:

Définir une valeur plus grande pour la propriété perspective crée un effet 3D moins visible, tandis qu'un plus petit le rend plus prononcé.

Une valeur d'environ 800 pixels convient généralement à la plupart des petits objets, mais si vous créez quelque chose de plus grand (comme un gratte-ciel), vous pouvez utiliser une valeur inférieure pour créer des angles plus prononcés.

Lors de la définition de la propriété de perspective, vous devez également définir l'origine de la perspective (propriété qui détermine la position de la caméra virtuelle face à la scène), positionnée sur les axes X et Y.

Création de formes: pensée spatiale

La création de formes 3D à l'aide de HTML et de CSS implique la représentation d'un objet sous la forme d'un ensemble de plans bidimensionnels.

Au lieu de dessiner des sommets et de collecter des formes à partir de points et de lignes, ce qui, comme vous le savez, est effectué dans d'autres programmes 3D, nous allons travailler avec des plans à deux dimensions, en les positionnant simultanément. Nous assemblons un cube de six plans correspondant aux côtés, à l'apex et à la base.

Premièrement, donnons une forme et un style aux éléments de la figure:

L'étape suivante consiste à indiquer où ils doivent être situés dans l'espace 3D.

Temps de conversion

Placez les formes à l'aide de la propriété de transformation. Les transformations CSS consistent en une série d'instructions indiquant à la fiche comment déplacer, faire pivoter, incliner et mettre à l'échelle. Les instructions sont lues de gauche à droite.

Faites attention à l'utilisation de la propriété transform-style: lorsqu'elle est définie sur préserv-3d, les transformations sur les côtés du cube sont effectuées dans leur propre espace 3D.

Nous définissons également le point par rapport auquel les transformations sont effectuées.

La propriété transform-origin définit le point dans les coordonnées X, Y, Z, qui fait office de centre de rotation (il s'agit du centre de l'avant de l'élément):

La figure de devant est décalée de 150 pixels vers l’avant, celle d’arrière de 180 degrés et de 150 pixels vers l’arrière de la scène.

L'ordre ici est important - les règles de conversion sont appliquées de gauche à droite. Pour la deuxième transformation, une valeur positive est définie: après la rotation, la face avant est tournée vers l'arrière de la scène.

Comme auparavant, l'ordre des transformations est important. Si l'élément est pivoté, son axe Z sera à un angle différent, ce qui affectera toute autre transformation.

Placez maintenant les autres côtés:

Maintenant, nous avons complètement le cube situé sur la scène 3D.

Déplacer, déplacer

Tournons notre création 3D sur scène à l'aide d'animations CSS:

Les animations CSS sont créées à l'aide d'une séquence d'images clés. Les images clés sont un ensemble d'états d'objet établis à l'aide de pourcentages.

L'animation commence par une rotation de zéro et se termine par une rotation complète de l'élément autour de l'axe des ordonnées.

Appliquez ce jeu d'images clés avec la propriété animation:

L'animation de rotation appliquée ici est conçue pour 10 secondes et se répète à l'infini avec une vitesse linéaire constante:

Nous avons un cube qui tourne sur scène, mais il est maintenant éclairé de tous les côtés. Pour ajouter une ombre sans utiliser plus de sélecteurs, nous allons utiliser des pseudo-sélecteurs.

Les pseudo-sélecteurs ressemblent à des éléments HTML supplémentaires pouvant être insérés avant et après le contenu d'un élément.

Ils nous fournissent des fonctionnalités supplémentaires et peuvent contenir des dégradés, des couleurs ou même du texte. De cette façon, nous pouvons animer la gradation de chaque côté du cube.

Nous avons besoin de deux gradients: l'un pour le cas où la surface tourne à gauche, l'autre pour la rotation à droite:

Les éléments before et after dans cet exemple sont des pseudo-sélecteurs pouvant être stylés et animés.

Il est important de noter que cette fonctionnalité n'est pas encore totalement prise en charge par les navigateurs - Google Chrome, Firefox et IE10 offrent différents niveaux de support - et que la situation pourrait s'améliorer.

Appliquez une animation à chaque pseudo-sélecteur pour déterminer quand afficher / masquer ces dégradés:

Chaque animation est constituée d’un ensemble d’images clés qui affichent ou masquent le dégradé au cours de l’animation.

Les images clés suivantes sont appliquées à l'arrière:

L'ensemble des animations, ainsi que les préfixes de chaque navigateur, se trouvent dans les fichiers du projet.

Haut et bas

La prochaine étape est le haut et le bas du cube. Un sommet a besoin d'un gradient qui ressemble à rien ne bouge.

Ajoutez un dégradé à l’élément supérieur et faites-le pivoter dans le sens opposé:

La base du cube ne sera pas visible, mais nous pouvons l'utiliser pour ajouter l'attribut box-shadow:

Plus que de la couleur

À ce stade, en utilisant uniquement CSS, nous avons créé un cube animé ombré, bien que comportant des côtés pleins. Puisque nous travaillons avec des éléments HTML, nous pouvons jouer avec le contenu.

Les faces d'un cube peuvent contenir des images, du texte ou même d'autres animations. Dans l'exemple ci-dessous, j'ai appliqué des images de fond d'un jeu Minecraft:

Les ombres que nous avons ajoutées précédemment sont toujours présentes ici, ce qui confère aux côtés du cube une impression de profondeur accrue. Cet effet fonctionnera pour n’importe quel contenu de l’élément figure.

Si les ombres animées et les ombres ne suffisent pas, nous pouvons ajouter un peu plus de brillance à la scène à l'aide de filtres WebKit sophistiqués (notez que pour le moment, cette fonction n'est possible qu'avec WebKit):

Ajouter du contenu

Ajoutez le contenu qui tombe dans le champ de vision de l'utilisateur lors de la rotation du cube. Cela se produira du côté droit du cube. Nous connectons un peu de JavaScript à l’ouvrage pour appeler le bouton «Suivre» (disponible sur la page des boutons Twitter).

L'élément figure avec class right devrait contenir quelque chose comme ceci:

Le bouton Suivre est placé en ajoutant une règle iframe au CSS:

Tweet sur un cube

Twitter fournit un moyen facile d'obtenir les derniers tweets sous forme de widgets. Pour installer le widget, connectez-vous à votre compte Twitter et accédez à la page du widget Twitter.

Sélectionnez «Créer un nouveau bouton», puis entrez votre nom d'utilisateur Twitter dans le champ Nom d'utilisateur. Dans cet exemple, nous utilisons le login netmag.

Cliquez sur le bouton Créer un widget pour générer le code d'intégration.

Nous pouvons styliser le widget et définir la largeur, la hauteur et certaines valeurs de données dans le code. Remplacez YOUR_WIDGET_ID par l'identifiant fourni dans votre code d'intégration:

Transformations

Pour l’ombrage, nous n’avons pas besoin d’animation avec des images clés: elle apparaît lorsque vous survolez ou déclenchez un événement.

Ajoutez quelques transitions à l’ombrage des pseudo-sélecteurs:

Pour le pseudo-sélecteur du côté droit, la valeur d'opacité de 0,4 est définie. Cela ajoute une petite ombre et vous pouvez animer l'opacité de sorte que le visage devienne plus clair lorsque vous vous tournez vers l'avant.

Le droit: après le pseudo-sélecteur est masqué, car nous ne ferons pas pivoter le cube autant que nécessaire. Le côté avant est sombre, mais il est plus clair que le côté droit quand il se tourne vers l'avant:

Animation en survol

Maintenant, en ajoutant des effets d'ombrage, nous allons créer un effet «d'observation» animé lorsque l'utilisateur survole le cube à l'aide de l'état de survol CSS:

Lorsque vous survolez, le cube pivote de 50 degrés vers la gauche. Cette transformation est effectuée comme une transition en douceur en appliquant la propriété de transition.

En même temps, l'opacité des pseudo-sélecteurs situés à l'avant et à droite du cube prend la valeur 0,2.

Le résultat de toutes ces transitions est un bel effet de rotation 3D qui vous permet de masquer du contenu supplémentaire et de le montrer si l'utilisateur survole le cube.

Le code HTML et CSS complet se trouve dans les fichiers du projet:

La création d'objets à partir d'éléments HTML plats présente un certain nombre de limitations: tout objet que vous créez doit être créé en combinant des formulaires plats pour obtenir le résultat final.

Il est difficile de créer des objets courbes, tels que des tubes et des sphères, sans utiliser un grand nombre d'éléments. Cette solution est donc mieux adaptée aux objets plus simples.

Mais en utilisant des ombres et des animations, vous pouvez obtenir des résultats impressionnants avec des structures simples.

Performance et test

Lors de la création d'objets 3D, vous devez vous rappeler que les performances du navigateur et la vitesse de l'ordinateur peuvent varier considérablement. CSS, en fait, n’est pas optimisé pour les scènes 3D complexes à chargement graphique, vous devez donc faire preuve de prudence lorsque vous travaillez avec des projets publics.

Testez sur différentes plates-formes: les visiteurs peuvent également utiliser des appareils mobiles ou des ordinateurs lents et obsolètes.

Et bien que tous les navigateurs ne prennent en charge que les transformations 3D, les dégradés et toutes les touches élégantes que nous avons utilisées ici, il ne s’agit que d’une question de temps, la plupart des navigateurs ne les prennent toujours pas en charge.

Nous devons nous assurer que les visiteurs utilisant des versions antérieures de navigateurs ne reçoivent pas une page déformée.

Une solution pour résoudre ce problème consiste à utiliser la détection de fonctionnalité et à afficher une version alternative pour les navigateurs ne prenant pas en charge les propriétés souhaitées.

Dans ce cas, nous utiliserons le script Modernizr pour déterminer si les transformations 3D sont prises en charge et, le cas échéant, pour afficher une image statique.

Pour commencer, activez Modernizr dans l'en-tête HTML:

Une fois chargée, la classe csstransforms3d sera insérée dans la balise. Ensuite, nous utiliserons ces informations pour afficher ou masquer l’option de sauvegarde:

Dans cet exemple, une image statique est une alternative. Utilisez l'élément fallback div pour représenter le contenu en deux dimensions dans un navigateur ou un autre message:

Prochaines étapes

Un cube 3D stylisé n'est probablement pas la première chose à faire pour la plupart des clients en conception Web, mais certaines des approches ci-dessus peuvent avoir des utilisations différentes.

Vous pouvez créer un effet de transition 3D lorsque vous survolez le logo - un moyen accrocheur de présenter un nouveau produit - ou utilisez ces approches pour présenter et parcourir des données complexes. L'utilisation de l'axe Z dans la conception ouvre la porte à de nombreuses idées intéressantes et amusantes.

Cette publication est une traduction de l'article "Comment créer des graphiques 3D impressionnants en CSS3" préparé par l'équipe amicale du projet de technologie Internet

Pin
Send
Share
Send
Send