Comment fonctionne la perspective CSS

Les amateurs d'animation CSS utilisent souvent l'outil puissant de la perspective. Bien que la propriété en perspective elle-même ne puisse pas atteindre des effets 3D (car la forme de base n'a pas de profondeur), vous pouvez utiliser transform pour déplacer et faire pivoter des objets dans l'espace 3D (axe x, y et z), puis utiliser la perspective pour contrôler la profondeur.

Cet article commencera par les bases, expliquera progressivement le concept de perspective et créera enfin une animation de cube rotative 3D complète.

Perspective Basics

Nous commençons par un simple carré vert et le déplaçons sur trois axes.

Le déplacement d'un objet sur les axes x et y est très simple, mais si vous le déplacez sur les axes Z, il semble que le carré reste le même. En effet, lorsque l'objet se déplace sur l'axe Z, l'animation le rapproche de nous, puis loin de nous, mais la taille (et la position) du carré reste la même. C'est là que l'attribut perspective CSS entre en jeu.

Bien que la perspective n'ait aucun effet lorsque l'objet se déplace sur l'axe x ou y, la perspective rend le carré plus grand lorsqu'il est proche de nous et plus petit lorsqu'il est loin de nous. Oui, comme dans la vraie vie.

Le même effet se produit également lorsque nous tournons l'objet:

La rotation d'un carré sur l'axe Z ressemble à une rotation régulière que nous connaissons tous et que nous aimons, mais lorsque nous tournons un carré sur l'axe X ou Y (sans utiliser de perspective), il semble que le carré devienne plus petit (ou plus étroit) plutôt que de tourner. Mais lorsque nous ajoutons de la perspective, nous pouvons voir que lorsque le carré tourne, le côté proche du carré est plus grand, le côté éloigné semble plus petit et la rotation semble comme prévu.

Notez que lorsque l'objet tourne à un angle de 90 ° sur l'axe x ou y (ou 270 °, 450 °, 630 °, etc.), il "disparaîtra" hors de vue. Encore une fois, c'est parce que nous ne pouvons pas ajouter de profondeur à l'objet, et à cette position, la largeur (ou la hauteur) du carré sera en fait 0.

Valeur en perspective

Nous devons utiliser une valeur pour définir perspective . Cette valeur définit la distance du plan d'objet, ou en d'autres termes, l'intensité de la perspective. Plus la valeur est grande, plus vous proviennent de l'objet; Plus la valeur est petite, plus l'effet de perspective est évident.

Perspective de l'origine

perspective-origin détermine l'orientation de votre objet "observer". Si l'origine est centrée (c'est la valeur par défaut) et que l'objet se déplace vers la droite, il semble que vous le regardez depuis la gauche (et vice versa).

Alternativement, vous pouvez centrer l'objet et déplacer perspective-origin . Lorsque l'origine est réglée sur le côté, c'est comme si vous «observez» l'objet de ce côté. Plus la valeur est grande, plus elle semble hors du centre.

Transformer

Bien que perspective et perspective-origin soient réglées sur le conteneur parent de l'élément et déterminent la position du point de fuite (c'est-à-dire la distance de l'endroit où vous "observez" l'objet au plan de l'objet), le déplacement et la rotation de l'objet sont définis en utilisant la propriété transform , qui est déclarée sur l'objet lui-même.

Si vous regardez le code à partir de l'exemple précédent, je déplace le carré d'un côté à l'autre, vous verrez que j'utilise la fonction translateX() - cela a du sens car je veux qu'il se déplace le long de l'axe x. Mais notez qu'il est affecté à la propriété transform . Cette fonction est un type de transformation qui est appliqué directement à l'élément que nous voulons convertir, mais son comportement est conforme aux règles de perspective attribuées à l'élément parent.

Nous pouvons "lier" plusieurs fonctions pour transform les propriétés. Mais lorsque vous utilisez plusieurs transformations, il y a trois choses très importantes à considérer:

1. Lorsqu'un objet est tourné, son système de coordonnées changera avec l'objet.
2. Lorsque vous traduisez un objet, il se déplace par rapport à son propre système de coordonnées (plutôt qu'à sa coordonnée parent).
3. L'ordre dans lequel ces valeurs sont écrites changent (et vont) modifier le résultat final.

Pour obtenir l'effet que je voulais dans la démo précédente, j'ai d'abord besoin de traduire le carré sur l'axe des x. Ce n'est qu'alors que je peux le faire tourner. Si vous faites cela dans l'ordre inverse (tournez d'abord, alors traduisez), le résultat sera complètement différent.

Pour souligner l'importance de l'ordre de valeur pour transform les propriétés, examinons quelques exemples simples. Premièrement, il s'agit d'une simple transformation bidimensionnelle (2D) de deux carrés, qui ont tous deux les mêmes valeurs de transformation, mais dans des ordres de déclarations différents:

Il en va de même même si nous tournons le carré sur l'axe y:

Il convient de noter que si l'ordre des valeurs est important, nous pouvons simplement modifier les valeurs elles-mêmes pour obtenir le résultat souhaité au lieu de modifier l'ordre des valeurs. Par exemple……

 <code>transform: translateX(100px) rotateY(90deg);</code>

... le même effet que les suivants:

 <code>transform: rotateY(90deg) translateZ(100px);</code>

En effet, dans la première ligne, nous avons déplacé l'objet sur l'axe X avant de faire tourner l'objet, mais dans la deuxième ligne, nous avons tourné l'objet, changé ses coordonnées, puis l'avons déplacée sur l'axe Z. Même résultat, différentes valeurs.

Voyons quelque chose de plus intéressant

Bien sûr, les carrés sont un excellent moyen d'expliquer le concept général de la perspective, mais lorsque nous le décomposons en formes tridimensionnelles (3D), nous pouvons vraiment voir comment fonctionne la perspective.

Construisons un cube 3D en utilisant tout ce que nous avons couvert jusqu'à présent.

Html

Nous allons créer un élément .container qui tourne autour d'un élément .cube , .cube contient six éléments, représentant les six faces du cube.

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

CSS universel

Tout d'abord, nous ajouterons une certaine perspective à l'élément .container . Nous nous assurerons ensuite que l'élément .cube a une longueur latérale de 200px et adhérer à la transformation 3D. J'ai ajouté quelques styles d'expression ici, mais les attributs clés sont mis en évidence.

 / * Conteneur parent avec perspective * /
.Container {
  Largeur: 400px;
  hauteur: 400px;
  Border: 2px blanc solide;
  Border-Radius: 4px;
  Affichage: flex;
  Justification-contenu: centre;
  Align-Items: Centre;
  Perspective: 800px;
  Perspective-Origin: en haut à droite;
}

/ * Éléments enfants, conserver la transformation 3D * /
.cube {
  Position: relative;
  Largeur: 200px;
  hauteur: 200px;
  style transform: Preserve-3d;
}

/ * La surface du cube, positionnement absolu * /
.côté {
  Position: absolue;
  Largeur: 100%;
  hauteur: 100%;
  Opacité: 0,9;
  Border: 2px blanc solide;
}

/ * Cube Face Background Color, aide à visualiser le travail * /
.Front {Background-Color: # D50000; }
.back {Background-Color: # aa00ff; }

.Left {fond-Color: # 304ffe; }
.Right {Background-Color: # 0091EA; }

.TOP {Background-Color: # 00BFA5; }
.Bottom {fond-Color: # 64DD17; }

Changer la surface

Le front est le plus simple. Nous le faisons avancer de 100px:

 .devant {
  Color d'arrière-plan: # D50000;
  Transform: Translatez (100px);
}

Nous pouvons déplacer l'arrière du cube vers l'arrière en ajoutant translateZ(-100px) . Une autre façon consiste à faire pivoter le côté 180 degrés et à avancer:

 .dos {
  Color d'arrière-plan: # aa00ff;
  Transform: Translatez (-100px);

  /* ou */
  / * Transform: Rotatey (180Deg) Translatez (100px); * /
}

Comme le dos, nous pouvons transformer les côtés gauche et droit de plusieurs manières:

 .gauche {
  Color en arrière-plan: # 304FE;
  transformée: rotatey (90deg) tradlatez (100px);

  /* ou */
  / * transform: tradlatex (100px) rotatey (90deg); * /
}

.droite {
  Color en arrière-plan: # 0091EA;
  Transform: Rotatey (-90DEG) Translatez (100px);

  /* ou */
  / * transform: tradlatex (-100px) rotatey (90deg); * /
}

Le haut et le bas sont légèrement différents. Nous n'avons pas besoin de les faire pivoter sur l'axe Y, nous devons les faire pivoter sur l'axe x. Encore une fois, cela peut être fait de plusieurs manières différentes:

 .haut {
  Color d'arrière-plan: # 00BFA5;
  Transform: Rotatex (90Deg) Translatez (100px);

  /* ou */
  / * transform: tradlatey (-100px) rotatex (90Deg); * /
}

.bas {
  Color d'arrière-plan: # 64DD17;
  Transform: Rotatex (-90DEG) Translatez (100px);

  /* ou */
  / * Transform: tradlatey (100px) rotatex (90deg); * /
}

Cela vous donne un cube 3D!

N'hésitez pas à essayer différentes perspective et options perspective-origin et voir comment elles affectent le cube. Il n'y a pas de valeur "correcte", et ces valeurs varient selon les éléments, car ils dépendent de l'animation, de la taille de l'objet et de l'effet que vous souhaitez réaliser.

Parlons transform-style

Nous ajouterons une belle animation au cube, mais discutons d'abord transform-style . Je l'ai déjà ajouté dans CSS générique, mais cela n'explique pas vraiment ce que c'est ni ce qu'il fait.

transform-style a deux valeurs:

• flat (valeur par défaut)
• preserve-3d

Lorsque nous définissons la propriété pour preserve-3d , il fait deux choses importantes:

1. Il dit au visage du cube (éléments enfants) d'être dans le même espace 3D que le cube. S'il n'est pas défini pour preserve-3d , la valeur par défaut est flat et le visage est aplati sur le plan du cube. preserve-3d "Copier" la perspective du cube à ses éléments enfants (visages) et nous permet de tourner uniquement le cube, nous n'avons donc pas besoin d'animer chaque visage séparément.
2. Il affiche des éléments enfants en fonction de leur position dans l'espace 3D, quelle que soit leur position dans le DOM.

Il y a trois carrés dans cet exemple - vert, rouge et bleu. La valeur translateZ du carré vert est de 100px, ce qui signifie qu'il est devant d'autres carrés. Le carré bleu a une valeur translateZ de -100px, ce qui signifie qu'il est derrière d'autres carrés.

Mais dans le DOM, l'ordre des carrés est: vert, rouge, bleu. Ainsi, lorsque transform-style est réglé sur flat (ou non du tout), le carré bleu sera affiché en haut et le carré vert sera en retard car c'est l'ordre du DOM. Cependant, si nous définissons transform-style pour preserve-3d , il rendra en fonction de sa position dans l'espace 3D. En conséquence, le carré vert sera à l'avant et le carré bleu sera à l'arrière.

Animation

Maintenant, animons le cube! Pour rendre les choses plus intéressantes, nous ajoutons des animations aux trois axes. Tout d'abord, nous ajoutons la propriété animation à .cube . Il ne fera rien de plus, car nous n'avons pas encore défini la nature clés de l'animation, mais quand nous le faisons, c'est en place.

 Animation: Cuberotate 10s linéaire infini;

Est maintenant l'image clé. Nous voulons essentiellement faire pivoter le cube le long de chaque axe afin qu'il semble rouler dans l'espace.

 @keyframes cuberotate {
  de {transform: rotatey (0deg) rotatex (720deg) rotatez (0deg); }
  à {transform: rotatey (360deg) rotatex (0deg) rotatez (360deg); }
}

perspective est en fait un attribut qui donne la profondeur d'animation, tout comme nous voyons le défilement du cube à gauche et à droite, et en avant et en arrière.

Mais avant cela, les valeurs de perspective étaient cohérentes, tout comme perspective-origin . Voyons comment le changement de ces valeurs affecte l'apparence du cube.

J'ai ajouté trois curseurs à cet exemple pour aider à voir comment différentes valeurs affectent la perspective du cube:

• Le curseur de gauche définit la valeur de perspective . N'oubliez pas que cette valeur définit la distance au plan de l'objet, donc plus la valeur est petite, plus l'effet de perspective est évident.
• Les deux autres curseurs se réfèrent à perspective-origin . Le curseur droit définit l'origine sur l'axe vertical, de haut en bas, et le curseur inférieur définit l'origine sur l'axe horizontal, de droite à gauche.

Notez que ces modifications peuvent ne pas être évidentes lorsque l'animation est en cours d'exécution, car le cube lui-même tourne, mais vous pouvez facilement désactiver l'animation en cliquant sur le bouton d'exécution d'animation.

N'hésitez pas à essayer ces valeurs et à voir comment elles affectent l'apparence du cube. Il n'y a pas de valeur "correcte", et ces valeurs varient selon les éléments, car ils dépendent de l'animation, de la taille de l'objet et de l'effet que vous souhaitez réaliser.

Étapes suivantes?

Maintenant que vous avez les bases des attributs perspective dans CSS, vous pouvez utiliser votre imagination et votre créativité pour créer des objets 3D dans vos propres projets, en ajoutant de la profondeur et du plaisir à vos boutons, menus, entrées et tout ce que vous voulez "donner vie à la vie".

Dans le même temps, vous pouvez essayer de créer des structures complexes et des animations basées sur la perspective pour pratiquer et améliorer vos compétences, comme ceci, ceci, ceci et même cela.

J'espère que vous avez aimé lire cet article et apprendre quelque chose de nouveau dans le processus! N'hésitez pas à laisser un commentaire pour me faire savoir ce que vous pensez, ou si vous avez des questions sur la perspective ou tout autre sujet de cet article, laissez-moi un commentaire sur Twitter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!