Bonjour tout le monde.
Aujourd'hui, nous allons parler brièvement des transformations. Les
transformations sont très similaires aux transitions, en ce qu'elles fournissent une autre
option pour changer l'apparence des éléments qui se trouvent sur notre page.
Ainsi, nous pouvons changer les choses à la fois de la manière bidimensionnelle et
d'une manière tridimensionnelle lorsque les gens regardent votre site.
Regardons donc certaines des options de transformation en deux dimensions.
Nous allons parler de la traduction, de la rotation, de l'échelle, de l'
inclinaison et de la matrice, et comment chacun d'entre eux peut fonctionner dans votre CSS3.
La première option que je vais vous montrer est de traduire.
Ce que la traduction fera est que vous pouvez lui donner deux valeurs, je les ai appelées x et
y et en fonction de ces valeurs,
vous pouvez déplacer l'élément vers la gauche et la droite ou vers le haut et le bas.
Si x est positif,
vous vous déplacez vers la droite, si c'est négatif, vous vous déplacez vers la gauche.
Avec y, si c'est positif, vous vous déplacez vers le bas et si c'est négatif, vous vous déplacez vers le haut.
Alors regardons un exemple réel pour le rendre un peu plus clair.
Ici, j'ai ce bel élément bleu.
Et ce que je vais dire, c'est que je veux le traduire, 100 et 75.
Donc, vous allez vous attendre à le voir bouger un peu vers la droite et vers le bas.
Donc, vous pouvez voir, encore une fois, c'est difficile de vraiment dire quand les choses vont de haut en bas.
Mais si vous regardez les marges, nous avons presque augmenté les marges.
L' option suivante est la rotation.
Lorsque vous faites pivoter quelque chose, vous tournez, ou
j'aime penser qu'il tourne l'élément, un certain nombre de degrés.
Tu ne vois pas le spin.
Vous voyez juste le résultat ou à quoi il ressemblerait à la fin.
Donc ici, j'ai un autre élément et je vais lui dire de tourner de 30 degrés.
Donc d'ici, à ici.
Maintenant, il est vraiment important que n'oubliez pas de mettre le degré.
Si vous venez de mettre 30, beaucoup de navigateurs ne vont pas avoir ce travail.
En fait, la plupart d'entre eux ne le feront pas.
Assurez-vous donc de lui donner les degrés que vous voulez qu'il tourne, une sorte de nombre, 30,
90, 80, puis utilisez le degré.
Ensuite, parlons de l'échelle.
Et l'échelle est juste une façon fantaisie de dire, rendons la plus large ou plus grande.
Donc encore une fois, vous lui donnez deux chiffres, et
c'est combien vous voulez changer la largeur et la hauteur d'un élément.
Donc ici, j'ai un bloc plus petit, et
j'ai décidé que j'aimerais le faire deux fois plus large et trois fois plus haut.
Voici un nouvel élément après l'échelle de transformation.
Skew est très difficile pour moi d'expliquer ce qu'il fait, et c'est encore plus difficile de le faire
parce que j'oublie toujours ma gauche et mes droits quand je regarde la caméra.
Donc, encore une fois, vous allez vouloir jouer avec celui-ci et
regarder quelques-uns des exemples.
Ce que vous faites, c'est que vous faites tourner l'élément un certain nombre de degrés autour de
l'angle x et un certain nombre de degrés autour de l'angle y.
Je vais vous montrer une inclinaison de 30 degrés par 15 degrés.
Vous commencez ici et vous finissez par tourner sous un angle très bizarre.
Et encore une fois, c'est très difficile de vous montrer ça quand je regarde l'écran, alors
j'espère que vous allez taper ça et jouer un peu avec ça.
L' option suivante et finale est la matrice.
Et lorsque vous utilisez la matrice,
vous pouvez combiner toutes les méthodes de transformation 2D en une seule commande à la fois.
Je ne l'utilise jamais, parce que je trouve trop confus
de me rappeler quelle échelle, laquelle tourne, laquelle est biaisée.
Donc, à moins que vous vous sentez vraiment confiant avec votre CSS3, j'éviterais d'utiliser la matrice
et d'aller de l'avant et d'utiliser chacune des autres transformations individuelles une à la fois.
Donc les autres dont nous venons de parler étaient des transformations bidimensionnelles.
Nous pouvons aussi faire des transformations tridimensionnelles, et
elles sont très similaires à celles dont nous venons de parler.
Ainsi, par exemple avec la rotation, au lieu de tourner simplement le long de l'
axe x ou y, nous pouvons également tourner autour de la dimension z.
Donc, si vous voulez utiliser une rotation 3D, vos options sont maintenant transformé:Rotatey
combien de degrés, RotateX, Rotatez,
ou vous pouvez réellement dire rotate3d et lui donner des nombres le long de chaque dimension.
J' utilise rarement les dimensions 3D.
Mais nous avons les options.
Nous avons la rotation, nous avons l'échelle, et nous avons la traduction.
Et ils peuvent vraiment faire des choses vraiment intéressantes avec la façon dont vous voulez que vos
éléments ressemblent.
Quand vient le temps d'utiliser des transformations, il y a quelques choses à penser.
Généralement, lorsque vous utilisez des transformations, vous allez les utiliser avec des changements d'état.
Si vous vous en souvenez, cela signifie que vous pourriez avoir une transformation se produire lorsque vous effectuez un
survol, un focus sur ou un actif sur.
Si vous essayez vraiment de changer à quoi ressemble un élément
dès le début et de le laisser ainsi, vous pouvez penser à prendre des photos
et à jouer avec les images et à faire les choses hors ligne.
C' est plus rapide et il n'utilise pas autant de bande passante.
Cependant, c'est une façon cool de jouer avec les choses et de
gagner en confiance avec votre CSS.
Bien sûr, avec tant de choses que nous avons appris dans cette classe, il est important de se
rappeler que vous aurez souvent besoin de préfixes de navigateur pour que les transformations fonctionnent.
Donc, un outil de plus dans votre ceinture d'outils pour
apprendre à faire quelque chose d'excitant avec votre page.
Je sais que je n'ai pas fait mon exemple normal ici, mais
la vidéo suivante va montrer un exemple en utilisant des transitions, des transformations, et
certaines des autres choses que nous avons appris depuis le début.
J' espère que vous y regarderez et vous
sentirez un peu plus confiant sur ce que nous venons d'apprendre avec les transformations.
Bonne chance.