Accentsconagua
Share
Nous tirons notre inspiration de ce tutoriel de la dernière initiative d’Envato; Envato Elements. La page d'accueil de Elements propose une gamme de produits créatifs (polices, icônes, modèles graphiques, etc.) qui s'affichent ensemble sur une présentation nette de la grille isométrique..
La page d'accueil des éléments Nous allons recréer ce paysage isométrique à l'aide de CSS 3D Transforms.
La «projection isométrique» est une méthode (couramment utilisée en ingénierie et dans les jeux dans les années 80 et 90 où la puissance de traitement en 3D était très limitée) pour présenter un dessin en trois dimensions apparentes..
Certains objets visualisés à l'aide de la projection isométrique. Image par Wikipedia. Ce ne sont pas des trois dimensions telles que nous les vivons dans la vie réelle - le plan sur lequel elles sont affichées manque de perspective.
Pendant de nombreuses années, le Web a été un environnement bidimensionnel et nous sommes habitués à positionner des éléments le long de deux axes ou directions: l’axe des x (horizontal) et l’axe des y (vertical)..
Remarque: l’axe des ordonnées sur le Web est inversé contrairement au principe de coordonnées cartésiennes original, car le Web est lu de haut en bas.
Le troisième axe, à savoir l'axe z, est nécessaire pour projeter une vue 3D. Cet axe représente profondeur, et la direction du mouvement d'un objet le long de l'axe z est relative à notre point de vue; il peut se déplacer de haut en bas, de haut en bas ou presque.
Les trois axes x, y et z dans le plan 3D. Image du W3C. Ces trois axes peuvent être appliqués à la fonction de transformation CSS pour créer une projection 3D. Dans la démo suivante, nous utilisons le rotationX (), rotationY (), et rotationZ () fonction pour créer une projection isométrique d'un rectangle:
Maintenant que nous avons le principe de base qui sous-tend une projection isométrique, nous pouvons le mettre en pratique. Et on commence avec le HTML.
De manière similaire à la page d'accueil Envato Elements, nous avons une disposition en grille. Notre grille comprend une rangée de neuf colonnes. Chaque colonne contient une image du produit, le lien pointant vers la page du produit et, comme vous pouvez le voir ci-dessous, un envergure élément que nous allons utiliser pour modéliser l'ombre de l'image.
Nous commençons avec les styles qui réinitialisent les styles par défaut de certains éléments.
html box-sizing: border-box; *, *: before, *: after box-sizing: inherit; img max-width: 100%; hauteur: auto; bloc de visualisation; figure margin: 0;
Ces styles définissent tous les éléments avec taille de la boîte, ce qui permettra de déterminer plus facilement la taille totale de l'élément. Nous avons également défini le rendu de l'image sur bloc supprimer ce petit espace au bas de l'image. Et finalement on enlève le figure marge d'élément qui enveloppe l'image.
Ensuite, nous procédons avec les styles de lignes et de colonnes.
.rangée largeur: 960px; affichage: flex; enveloppe souple: enveloppe; justifier-contenu: flex-end; transformation: rotationX (60 °); rotationY (0 °); rotationZ (-45 °); .column padding: 20px; largeur: 50%; largeur maximale: 50%; flex: 1 1 50%;
Les styles ci-dessus définissent la ligne à affichage: flex, définissez les styles de transformation sur 3D pour que les navigateurs adhèrent correctement à la transformation de l'axe z, faites pivoter la ligne pour créer une vue isométrique et divisez enfin les colonnes de la ligne en deux.
Ensuite, nous devons ajouter les styles qui positionnent les éléments enfants de la ligne et de la colonne en vue 3D. Ce style suivant est essentiel. le transformer-style: preserve-3d doivent être déclarés sur chaque élément enveloppé sous la .rangée, ils seront donc correctement rendus dans l'espace 3D - en particulier dans Firefox - et l'axe Z prendra effet.
.row, .column, .ItemCard, .ItemCard__dest, .ItemCard__thumb position: relative; visibilité face arrière: masquée; transformer-style: preserve-3d;
Ensuite, nous ajoutons des styles à la .couverture classe, que nous avons ajoutée à la balise d'ancrage du lien produit, et envergure élément (bientôt l'ombre).
.cover display: block; position: absolue; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%;
Ayant ce style ajouté, le lien du produit ainsi que le envergure L'élément s'étend maintenant à travers le conteneur. Nous sommes également en mesure de modifier la position de la pile d'éléments ultérieurement.
Les styles suivants régissent la position de l'élément de wrapper, le remplissage et certains éléments 3D. le visibilité arrière est défini pour ne pas voir à travers la pile sous l'élément traduit ou pivoté et ne pas voir la face inversée de l'image.
Nous appliquons une transition à l'image et passons par l'axe des z pour la faire "léviter" au-dessus "de l'ombre par 15px. De même, nous ajoutons également des éléments 3D: visibilité arrière et transformer-style, de sorte qu'il rendra la vue 3D correctement.
.ItemCard__thumb img position: relative; z-index: 1; transition: transformer 0,3 s de Bézier cube (0,165, 0,84, 0,44, 1); transformer: translate3d (0, 0, 20px);
Ce qui suit nous donne nos styles d'ombre. L’étendue de l’ombre doit être étroite et l’ombre plus sombre car l’image, à cet endroit, est plus proche (par 15px) jusqu'au «sol» où se reflète l'ombre.
.shadow display: block; transition: toutes les 0,3s de Bézier (0,165, 0,84, 0,44, 1); opacité: 0,9; couleur de fond: rgba (0, 0, 0, 0,1); boîte-ombre: 0 0 5px 1px rgba (0, 0, 0, 0,1);
Nous avons fait pas mal de progrès:
Remarquez le coin arrondi et l'ombre qui s'étend sous l'image.L'effet de survol rendra chaque vignette plus attrayante.
.colonne: survol .ItemCard__dest z-index: 10; .column: survol .ItemCard__dest, .column: survol .ItemCard__thumb img transform: translate3d (0, 0, 50px) rotationX (-5deg); origine de la transformation: centre du bas; .column: survol .ItemCard__thumb .shadow opacity: .6; couleur de fond: rgba (0, 0, 0, 0,1); boîte-ombre: 0 0 10px 6px rgba (0, 0, 0, 0,1);
En état de survol, comme illustré dans l'extrait de code ci-dessus, nous allons d'abord déplacer la pile d'éléments plus haut, de sorte que l'image (et le lien) apparaissent au-dessus du reste des éléments de la grille..
Nous allons également soulever légèrement l'image; l'éloigner du "sol" et un peu plus près de la "lumière". Ceci étant dit, l'ombre devrait perdre de la clarté, donc nous diminuons l'opacité de l'ombre..
L'article survolant est lévité plus haut que le reste et légèrement inclinéDans ce didacticiel, nous avons utilisé des transformations 3D en CSS pour créer une réplique de la grille isométrique d’Envato Elements. Nous avons également appris à ajouter du réalisme en termes d’ombres et de sources de lumière. Jetez un coup d'œil à la démo, récupérez les fichiers source et dites-nous ce que vous en faites.!
Les transformations 3D sont un puissant utilitaire CSS. Mais ne les considérez pas comme un gadget ou un jouet permettant d’ajouter une couche sophistiquée au Web. Appliqués judicieusement, les éléments 3D peuvent également résoudre certains problèmes de conception notoires.
