Les feuilles de style CSS (11/15) - Transformations et ombre portée

Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui, nous allons voir les transformations. Les transformations CSS permettent de modifier l'apparence d'un objet à partir d'un état initial ou bien un état par défaut, comme par exemple la transformation de l'origine, le déplacement relatif ou bien le changement de l'échelle. Prenons le code HTML suivant. Nous avons intégré une balise div identifiée par maDiv et Nous allons ensuite la styler en CSS. Alors dans le sélecteur ma div, nous allons spécifier les dimensions de l'objet, à savoir width par exemple 300 pixels, height 300 pixels, border solide 1px par exemple du noir, et background-color on va spécifier une couleur par exemple orange. Bon, si on exécute pour voir le rendu Bon, on va obtenir un carré orange. On va essayer de déplacer un petit peu vers le centre. Il suffit de mettre margin auto. Bon, ça va centrer automatiquement. Maintenant, on va mettre une marge supérieure pour le faire descendre un petit peu plus en bas. Alors margin top, par exemple 100 pixels. Alors maintenant, l'objet que nous avons, ça ressemble à ça. Nous allons ensuite appliquer une pseudo-classe hover afin de pouvoir faire la différence entre entre l'état initial et l'état avec la transformation. Alors là, on va mettre, on va copier ce style, on va ajouter la pseudo-classe hover, et ensuite on va éliminer tous les styles qui se répètent. Bon, par exemple, on va éliminer tout ça. La première opération à faire, c'est le changement de l'origine. L'origine, c'est quoi? Parce que par défaut, un objet, quand il va se transformer, il va se transformer par rapport à un point d'origine. Ce point-là, c'est le point central. On appelle le point 50%, 50% parce que ça constitue 50% de la largeur et 50% de la hauteur, partant toujours du principe que l'origine de l'objet c'est ce point haut à gauche. Pour changer cette origine, on va par exemple le placer dans ce point. Alors on va mettre transform origin 0, 0, ça veut dire 0%, 0%, et du coup on a déplacé l'origine à ce point. Désormais, toutes les transformations que l'on va appliquer à cette div seront centrés par rapport à ce point. Bon, dans un premier temps, on va laisser l'origine par défaut, c'est-à-dire 50%. 50%, ça c'est la valeur par défaut. Alors donc, même si vous ne déclarez pas cette ligne, l'origine sera comme ça. Nous allons maintenant essayer de transformer la position de l'objet. L'objet, il est là. Je voudrais, quand je le survole, qu'il se déplace, peu importe l'orientation que vous souhaitez. Alors là, on va mettre transform: translate. Translate est une valeur CSS qui permet d'accepter des paramètres, c'est un petit peu comme une fonction. Il va accepter par défaut 2 paramètres, à savoir le paramètre que l'on va appliquer sur l'axe des X et le paramètre que l'on va appliquer sur l'axe des Y. Imaginez par exemple que j'ai mis ici 100px, 50px. Alors l'objet maintenant quand je vais le survoler il va se déplacer de manière relative, ça veut dire par rapport à sa position initiale, de 100 pixels et 50 pixels vers le bas. Quand j'exécute, alors on voit bien que l'objet se déplace de cette manière. Bon, pour mieux voir l'effet on va ajouter une transition. Alors all, par exemple 0,5 secondes, ease. On va faire pour les deux, pour l'état initial aussi pour voir. Le chemin inverse. Quand je fais ça, donc voilà, maintenant ça c'est le déplacement. Il se déplace de 100 pixels vers la droite et 50 pixels vers le bas. Si par exemple vous voulez appliquer la translation uniquement par rapport à x ou bien par rapport à y, alors on peut utiliser translateX et on conserve une seule valeur. Dans ce cas, la translation, le déplacement sera établi par rapport à l'axe des x. Même chose par rapport à l'axe des y. Mais pour raccourcir la syntaxe, il est préférable de mettre juste translate et mettre les deux valeurs que vous souhaitez. Ça veut dire déclarer une seule ligne au lieu de deux lignes. Imaginez maintenant qu'on veut appliquer une autre transformation, par exemple scale. Donc scale va tout simplement remettre à l'échelle l'objet, soit il va l'agrandir ou bien il va réduire sa taille. On va mettre comme ça scale. Bon, même chose, on va spécifier l'échelle par rapport aux X et par rapport aux Y. Ou bien juste une seule échelle qui va s'appliquer aux deux. Par exemple, 1.5, ça veut dire que l'objet va s'agrandir une fois et demie par rapport à son état initial. Et figurez-vous bien que ces deux effets, ils vont être combinés. Ça veut dire on aura un déplacement et une remise à l'échelle, comme ça. Donc un déplacement et aussi donc l'agrandissement de l'objet. C'est comme ça que ça marche généralement pour les transformations. Ça veut dire on peut appliquer autant de transformations qu'on le souhaite dans une seule ligne. Ça veut dire on ne doit pas déclarer une autre directive ou bien une autre propriété transform avec de nouvelles valeurs parce qu'il va annuler la propriété qui était avant. Il suffit de mettre autant de transformations que vous voulez en les séparant par un espace. Voilà, alors on va éliminer ça pour ne pas trop alourdir le code. Alors scale, il va tout simplement remettre à l'échelle. Si on veut réduire la taille, il suffit de mettre une valeur inférieure à 1 parce que 1 c'est la valeur par défaut, ça veut dire l'objet ne change pas de dimension. Voilà, donc la taille maintenant est réduite et toujours par rapport à l'axe central, donc toujours par rapport à ce point-là. Si on change l'origine, par exemple 0, 0, maintenant ça va changer par rapport à ce point. Regardez comment ça se passe. Voilà, c'est une transformation qui est faite par rapport au point haut à gauche de l'objet. On va remettre l'origine telle qu'elle est. Maintenant on va voir une autre propriété, c'est skew. Comme ça. Bon, pour skew, normalement il est recommandé de mettre skewX et skewY Cependant, rien ne nous empêche de mettre les deux valeurs. Skew, il va tout simplement déformer l'objet en lui appliquant une inclinaison. Par exemple, on va mettre ici 30 degrés et là on va mettre 30 degrés aussi. Ça veut dire 30 degrés par rapport aux X et 30 degrés par rapport aux Y. Quand on actualise, on va voir que l'objet il est déformé de cette manière. Donc il y a une inclinaison de 30 degrés, voilà, par rapport à l'axe horizontal et aussi de 30 degrés par rapport à l'axe vertical. Qui est là. Maintenant on va voir rotate pour faire pivoter l'objet. Rotate, on va lui appliquer une valeur en degrés, par exemple 45 degrés. On appelle ça une rotation par rapport à l'axe des Z. Vous vous souvenez peut-être du positionnement de l'objet, on a dit que l'axe des Z c'est un axe virtuel qui sort de l'écran. Alors maintenant la transformation sera faite d'une manière plane, en 2D en quelque sorte. Bon, quand j'actualise La transformation se fait de cette manière dans le sens horaire et pas dans le sens antihoraire. Si on veut établir une transformation 3D, il suffit de mettre la transformation par rapport aux X et par rapport aux Y. Transformation par rapport aux X de 45 degrés, ça va donner ceci. On constate bien que ça ressemble un petit peu à l'effet Scale, c'est comme si on a changé l'échelle de l'objet, mais en réalité c'est bien une rotation, sauf que les perspectives ne sont pas visibles Et du coup, on n'imagine pas que c'est une rotation. C'est pourquoi on va ajouter les perspectives. Et ça aussi, c'est une valeur que l'on veut ajouter à la propriété transform. Voilà, perspective. N'oubliez pas de mettre un espace. Si vous mettez une distance, on appelle ça une distance référentielle, ça veut dire la distance virtuelle qui sépare l'observateur de l'objet. Plus la distance est grande, plus les perspectives sont moins visibles. Et plus la distance est réduite, plus les perspectives s'accentuent et elles deviennent plus visibles. Alors là, on va mettre pixels, voilà, on va mettre 500 pixels. Généralement, il faut prendre une valeur qui est supérieure aux dimensions pour ne pas avoir des déformations inattendues. Maintenant, quand j'actualise, on constate bien que la rotation est maintenant perceptible. Ça veut dire que c'est bien une rotation qui est faite par rapport à l'axe des X. Même chose par rapport à l'axe des Y, ça donne ça. Et toujours, la rotation, c'est par rapport à ce point. Point central. Bon, si on veut avoir l'impression d'une porte qui s'ouvre, alors il suffit de déplacer l'origine ici. Donc pour les X, on va mettre 0, pour les Y, on va laisser 50% pour être au milieu au niveau vertical. On exécute. Alors on a bien l'impression que c'est une sorte de porte qui s'ouvre. Bon, pendant qu'on y est, bon, je vais ajouter un autre effet qui ne fait pas vraiment partie des transformations, mais c'est ce qu'on appelle l'ombre portée. Alors maintenant, on va enlever ça. Ces transformations, je vais carrément les enlever, je vais conserver que la transition. Alors on va mettre la propriété box-shadow avec 4 paramètres qui sont séparés par un espace blanc. On va mettre les valeurs suivantes: 50px, 50px, 50px, rgba . Voilà, on va faire la même chose pour l'état initial. Maintenant on a une ombre qui ne change pas, donc même si je survole, parce que les valeurs sont les mêmes, J'exécute, bon ça donne ça. Bon, quand je suis rose, il se passe vraiment rien. Vous avez bien vu une ombre qui est apparue ici. Voilà. Alors comment réussir cette ombre? C'est grâce aux paramètres suivants: 50px, 50px, c'est-à-dire les deux premières valeurs, ils représentent l'étendue de l'ombre sur les x et l'étendue sur les y. Une valeur positive va décaler l'ombre vers la droite et aussi pour les y, il va décaler vers le bas. Si on prend une valeur négative, par exemple -50, alors maintenant l'ombre sera du côté gauche de l'objet de cette manière. Même chose pour les Y. Alors maintenant on va laisser la valeur 50. La troisième valeur qui est 50 pixels, c'est ce que l'on appelle la transition de l'ombre. C'est-à-dire que pour passer de la couleur que j'ai spécifiée dans RGB, dans ce cas c'est le noir transparent, pour passer du noir transparent qui est juste à côté de l'objet à de la transparence parfaite, j'ai besoin de 50 pixels. On appelle ça la transition de l'ombre. Maintenant on va changer les valeurs Dans l'état survolé, dans ce cas, l'ombre, il va passer au côté opposé avec une certaine animation qui donne l'impression que la source de lumière est en train de changer. Quand je fais ça, regardez, maintenant l'ombre, elle passe de cette manière. Ce sera tout pour cette leçon. Merci pour votre attention et à la vidéo prochaine.