Comment utiliser Perspective avec les options de transformation pour concevoir des murs de photos 3D dans Divi

Concevoir un mur de photos 3D semble être quelque chose de possible uniquement à l'aide d'un éditeur de photos comme Photoshop ou Sketch. Mais ce n'est pas! De nos jours, il existe une tonne de conceptions apparemment impossibles que vous pouvez créer sur le Web en utilisant uniquement CSS. Et avec un constructeur de pages comme Divi, vous n'avez même pas besoin d'en savoir beaucoup sur CSS pour créer ce genre de designs. C'est pourquoi aujourd'hui, je vais vous montrer comment concevoir des murs photo 3D dans Divi.

L'astuce consiste à utiliser la propriété perspective css. Avec une seule ligne de CSS ajoutée à un élément parent, vous pouvez utiliser les options de transformation intégrées de Divi pour faire pivoter des éléments dans des conceptions 3D réalistes.

Commençons!

Aperçu

Voici un aperçu des murs de photos 3D que nous allons concevoir aujourd'hui.

Téléchargez GRATUITEMENT les exemples de conception de mur de photos 3D

Pour mettre la main sur les designs de mur photo 3D de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Abonnez-vous à notre chaîne Youtube

Commencer

Pour commencer avec ce tutoriel, tout ce dont vous avez besoin est le thème Divi installé et actif. Vous aurez besoin de quelques images pour travailler, alors n'hésitez pas à utiliser les mêmes images que celles que j'utilise dans le Travel Agency Layout Pack. Après cela, vous devrez créer une nouvelle page, donner la page et le titre, et déployer le Divi Builder pour construire sur le front-end. Sélectionnez ensuite l'option « construire à partir de zéro ». C'est ça. Votre toile design vous attend !

Comprendre le fonctionnement de Perspective avec les options de transformation

Si vous avez déjà suivi un cours d'art de base, vous connaissez probablement la perspective. C'est une technique utilisée par les artistes pour dessiner des objets qui semblent être en 3D même s'il existe sur un morceau de papier ou une toile en 2D. Dans la conception Web, vous pouvez positionner des éléments dans des positions 3D à l'aide de la propriété transform. Dans Divi, ces options de transformation sont intégrées au constructeur Divi. La principale propriété de transformation qui place un élément dans une position 3D est la rotation de transformation, qui vous permet de faire pivoter des éléments le long de l'axe z, x ou y. Cependant, si vous faites pivoter un élément à l'aide de la rotation de transformation, l'élément n'apparaîtra pas en 3D à moins que la propriété perspective ne soit appliquée.

Par exemple, disons que vous avez un seul module d'image avec une image ajoutée à une ligne d'une colonne.

Ensuite, vous utilisez la propriété transform rotate pour faire pivoter l'image le long de l'axe x. L'image pivotera mais restera en 2D, de sorte que l'image semblera simplement avoir été comprimée du haut et du bas pour devenir plus courte.

Maintenant, si vous ajoutez une perspective à l'aide d'un petit extrait de CSS à l'élément principal de la ligne (qui est un élément parent de l'image), vous ajoutez une perspective à l'image. Selon la valeur de perspective, vous pouvez augmenter ou diminuer la distance entre l'objet et l'utilisateur qui regarde l'écran. Voici un exemple de ce à quoi ressemblera l'image si vous ajoutez « perspective : 600px » à la ligne.

Vous pouvez voir que la partie supérieure de l'image est plus petite et que le bas de l'image est plus grand, créant l'effet de perspective 3D. Fondamentalement, l'image est éloignée de 900 pixels de l'utilisateur qui consulte la page.

Dans ce didacticiel, j'utiliserai cette même technique pour faire pivoter une rangée entière d'images, puis j'ajouterai une perspective à la section parent pour créer des murs de photos 3D.

Conception de murs photo 3D supérieurs et inférieurs

Dans ce premier design, nous allons ajouter un mur de photos 3D en haut et en bas d'un même like de texte qui pourra servir de titre. Voici comment procéder.

Création du meilleur mur de photos 3D

Pour démarrer les choses sur votre nouvelle page, créez une section régulière avec une rangée de quatre colonnes.

Dans la colonne 1, ajoutez un module image avec votre première image. Toutes les images que j'utilise dans cet exemple sont 600px par 800px.

Une fois que vous avez téléchargé votre image dans le module d'image, mettez à jour le remplissage comme suit :

Rembourrage personnalisé : 3 % en haut, 3 % en bas, 3 % à gauche, 3 % à droite

Dupliquez (ou copiez et collez) l'image et ajoutez-la à chacune des quatre colonnes afin d'avoir trois images dans chacune des quatre colonnes comme celle-ci.

Cela servira de mur supérieur (ou de plafond) que nous ferons pivoter et ajouterons de la perspective pour créer la conception du mur 3D.

Personnaliser la section pour ajouter une perspective et masquer le débordement

Puisque nous allons faire pivoter le module de ligne (pas les images individuelles), nous devons ajouter la propriété perspective au parent de la ligne qui est la section. Et afin d'empêcher les images de sortir du conteneur de section, nous devons ajouter un débordement caché à la fois au débordement vertical et horizontal.

Pour ce faire, ouvrez le paramètre de section et mettez à jour les éléments suivants :

Couleur d'arrière-plan : #000000
Rembourrage personnalisé : 0px en haut, 0px en bas

Pour ajouter la propriété perspective, ajoutez le CSS personnalisé suivant à l'élément principal :

Élément principal CSS :

perspective: 400px;

Voir les propriétés de débordement comme suit :

Débordement horizontal : masqué
Débordement vertical : masqué

Mettre à jour les paramètres de ligne : largeur et largeur de gouttière

Il est maintenant temps de personnaliser la rangée pour la préparer à la conception 3D pivotée. Pour ce faire, nous allons réduire la largeur et supprimer toute marge entre les images en mettant à jour la largeur de la gouttière.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur de gouttière : 1
Largeur : 300 pixels (ordinateur de bureau, tablette et téléphone)

Mettre à jour les paramètres de ligne : transformer la rotation et l'origine

Utilisez maintenant l'option de rotation de transformation pour faire pivoter la ligne comme suit :

Transformer Rotation Axe Y: -58deg

Modifiez l'origine de la transformation comme suit :

Origine de la transformation : en bas au centre (ou 100 % 50 %)

Mettre à jour les paramètres de ligne : largeurs de colonne personnalisées

Puisque nous voulons que la disposition à quatre colonnes reste sur les écrans des tablettes et des téléphones, nous devons remplacer le css pour la largeur de colonne à ces points d'arrêt. Pour ce faire, nous devons ajouter une propriété css width à chacune des colonnes. Sous l'onglet Avancé, ajoutez l'extrait de code CSS personnalisé suivant à l'élément principal de chaque colonne comme suit :

(remarque : assurez-vous que la largeur de la gouttière est définie sur 1 ou cela ne fonctionnera pas)

Colonne 1 Élément principal :

width: 25% !important;

Élément principal de la colonne 2 :

width: 25% !important;

Élément principal de la colonne 3 :

width: 25% !important;

Élément principal de la colonne 4 :

width: 25% !important;

C'est ça. Notre premier mur de photos 3D a été créé.

Créer la section d'en-tête

Pour créer notre en-tête pour la conception, nous devons créer une nouvelle section régulière avec une ligne à une colonne directement sous la section actuelle.

Avant d'ajouter un module, mettez à jour la section avec un fond noir :

Couleur d'arrière-plan : #000000

Ajoutez ensuite la même propriété perspective à l'élément principal de la section que nous l'avons fait auparavant, comme suit :

Ajoutez ensuite un module de texte à la ligne avec les éléments suivants :

Contenu : Photographie

Police du texte : Titillium Web
Style de police de texte : TT
Texte Couleur du texte : #ffffff
Taille du texte : 5vw
Espacement des lettres du texte : 6px
Hauteur de la ligne de texte : 1 em
Orientation du texte : Centre

Maintenant, nous pouvons ajouter une rotation de transformation au module de texte. Avec la perspective définie sur le parent (ou la section), l'effet 3D se produira une fois que nous ferons pivoter le texte.

Ajoutez les valeurs de rotation de transformation comme suit :

Transformer Rotation Axe X: -12deg
Transformer Rotation Axe Y: 32deg

Nous sommes maintenant prêts à créer le mur de photos 3D inférieur.

Créez le mur de photos 3D inférieur (ou le sol)

Pour créer le mur de photos 3D inférieur, nous pouvons simplement copier et coller la section supérieure contenant le mur supérieur et le coller directement sous la section de titre.

Ensuite, mettez à jour les paramètres de ligne de la nouvelle section comme suit :

Transformation Rotation Axe Y: 58deg

Origine de la transformation : en haut au centre

Conception finale

C'est ça! Voyons la conception finale.

Le design restera également intact sur mobile (mis à part un petit débordement).

Création de murs de photos 3D gauche et droite

Pour cette prochaine conception, nous allons créer des murs de photos 3D sur les côtés gauche et droit de notre titre au lieu du haut et du bas. Pour démarrer le processus de conception, nous utiliserons certaines de nos conceptions prédéfinies dans notre premier exemple.

Pour commencer, dupliquez la section inférieure du premier exemple de conception contenant le mur d'images inférieur. Ensuite, ouvrez les paramètres de ligne de la nouvelle section et réinitialisez les options de transformation à l'état par défaut.

Ensuite, dupliquez la ligne.

Ensuite, copiez la ligne (pas la section) contenant le module de texte avec l'en-tête dans le premier exemple de conception. Collez-le ensuite entre les deux lignes contenant les images.

Il s'agit d'une configuration similaire à la première conception, sauf que toutes nos lignes sont à l'intérieur d'une section. Ceci est important pour la prochaine étape.

Nous voulons que nos deux murs d'images soient à gauche et à droite de la page avec le texte au centre. Un moyen simple de le faire est d'utiliser display flex sur notre section. Cela alignera nos lignes horizontalement dans la section.

Pour ce faire, ouvrez les paramètres de la section et ajoutez le CSS personnalisé suivant à l'élément principal :

(Remarquez que nous augmentons la valeur de perspective à 700px pour créer plus de distance "Z space" de la perspective de l'utilisateur.)

Élément principal CSS :

perspective: 700px;
display:flex;

Et voila ! Nos murs sont en place et prêts pour la rotation.

Ajouter plus d'images pour un mur plus haut

Pour rendre notre mur de photos 3D un peu plus haut, il suffit d'ajouter une autre image à chacune de nos quatre colonnes dans chacune des lignes contenant des images. Assurez-vous simplement qu'ils conservent le rembourrage de 3% comme les autres.

Modification de la largeur des deux rangées latérales

Avant de faire pivoter notre mur d'images, nous devons d'abord ajuster leur largeur à 100%. Ouvrez les paramètres de ligne pour le mur d'images sur le côté gauche et mettez à jour les éléments suivants :

Largeur : 100 % (ordinateur de bureau, tablette, téléphone)
Largeur maximale : 100 %

Faites ensuite la même chose pour la rangée du côté droit.

Rotation des rangées latérales pour un effet 3D

Nous sommes maintenant prêts à ajouter notre rotation de transformation à chacune de nos lignes. Tout d'abord, ouvrez les paramètres de ligne pour la ligne de gauche et mettez à jour les éléments suivants :

Transformation Rotation Axe X: 90deg

Ensuite, ouvrez les paramètres de ligne pour la ligne sur le côté droit et mettez à jour les éléments suivants :

Transformation Rotation Axe X : -90 degrés

Avec notre perspective en place au niveau de la section, nos lignes s'afficheront sous forme de murs de photos 3D de chaque côté de notre module de texte.

Résultat final

Voyons le résultat final.

Pour mettre un peu de cerise sur le gâteau, vous pouvez ajouter une image de fond avec des éléments graphiques 3D. Voici un exemple de conception avec une image d'arrière-plan tirée du pack de mise en page de crypto-monnaie.

Effet de survol bonus : faites basculer ces murs dans View on Hover !

Vous pouvez facilement ajouter un effet de survol de rotation de transformation qui permettra à l'utilisateur de visualiser le mur d'images en le faisant basculer en vue lors du survol. Pour ce faire, ouvrez les paramètres de la ligne de gauche et mettez à jour les éléments suivants :

Origine de la transformation : centre gauche
Transformation Rotation Axe X (survol): 0deg

Ensuite, sur les paramètres de la ligne de droite, mettez à jour les éléments suivants :

Origine de la transformation : centre droit
Transformation Rotation Axe X (survol): 0deg

Vérifiez maintenant le résultat.

Effet de conception bonus : faites en sorte que les images se détachent dans l'espace

Étant donné que la rangée d'images est tournée avec la perspective en place, vous pouvez déplacer les images dans votre rangée à l'aide de la traduction de transformation. Ce qui est cool, c'est que le mouvement restera le long du plan 3D. Pour ce faire, ouvrez simplement les paramètres d'une image et utilisez l'option de traduction de transformation pour déplacer l'image en dehors de la grille dans l'espace !

Voici un exemple de ce à quoi cela ressemblerait en ajoutant quelques valeurs de conversion de transformation aux images.

Dernières pensées

La création de murs de photos 3D dans Divi a vraiment un impact impressionnant sur la conception d'une page. Et je dois dire que c'est vraiment amusant d'expérimenter différentes conceptions en utilisant les techniques de cet article. La propriété perspective fonctionne de pair avec les options de transformation pour créer d'innombrables conceptions en 3D ! Et n'oubliez pas que ces lignes (ou murs) peuvent être remplies avec n'importe quel module de Divi. Alors n'hésitez pas à essayer quelques textes de présentation. J'espère que cela vous inspirera pour créer quelque chose d'unique aujourd'hui.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!