La transformpropriété vous permet de manipuler visuellement un élément en l'inclinant, en le faisant pivoter, en le traduisant ou en le mettant à l'échelle:
.element ( width: 20px; height: 20px; transform: scale(20); )Même avec une hauteur et une largeur déclarées, cet élément sera désormais redimensionné à vingt fois sa taille d'origine:
Voir l'explication de Pen Transform par CSS-Tricks (@ css-tricks) sur CodePen.
Donner à cette fonction deux valeurs l'étirera horizontalement par la première et verticalement par la seconde. Dans l'exemple ci-dessous, l'élément aura désormais deux fois la largeur mais la moitié de la hauteur de l'élément d'origine:
.element ( transform: scale(2, .5); )Ou vous pouvez être plus précis sans utiliser la fonction de raccourci:
transform: scaleX(2); transform: scaleY(.5);Mais ce scale()n'est qu'une des nombreuses fonctions de transformation disponibles:
Valeurs
scale(): Affecte la taille de l'élément. Cela vaut également pour lafont-size,padding,heightetwidthd'un élément aussi. C'est aussi une fonction abrégée pour les fonctionsscaleXetscaleY.skewX()etskewY(): Incline un élément vers la gauche ou la droite, comme pour transformer un rectangle en parallélogramme.skew()est un raccourci qui combineskewX()etskewYen acceptant les deux valeurs.translate(): Déplace un élément latéralement ou de haut en bas.rotate(): Fait pivoter l'élément dans le sens des aiguilles d'une montre à partir de sa position actuelle.matrix(): Une fonction qui n'est probablement pas destinée à être écrite à la main, mais qui combine toutes les transformations en une seule.perspective(): N'affecte pas l'élément lui-même, mais affecte les transformations des transformations 3D des éléments descendants, leur permettant à tous d'avoir une perspective de profondeur cohérente.
Fausser
/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )Les fonctions de transformation skewXet d' skewYinclinaison d'un élément dans un sens ou dans l'autre. N'oubliez pas: il n'y a pas de propriété abrégée pour incliner un élément, vous devrez donc utiliser les deux fonctions. Dans l'exemple ci-dessous, nous pouvons incliner un carré de 100px x 100px vers la gauche et la droite avec skewX:
Voir l'explication de Pen Transform par CSS-Tricks (@ css-tricks) sur CodePen.
Alors que dans cet exemple, nous pouvons incliner un élément verticalement avec avec skewY:
Voir l'explication de Pen Transform par CSS-Tricks (@ css-tricks) sur CodePen.
Utilisons maintenant skew()pour combiner les deux:
Voir la
propriété abrégée Pen skew () par CSS-Tricks (@ css-tricks)
sur CodePen.
Tourner
.element ( transform: rotate(25deg); )Cela fait tourner un élément dans le sens des aiguilles d'une montre à partir de sa position d'origine, tandis qu'une valeur négative le ferait tourner dans le sens opposé. Voici un exemple animé simple où un carré continue de tourner à 360 degrés toutes les trois secondes:
Voir l'explication de Pen Transform par CSS-Tricks (@ css-tricks) sur CodePen.
Nous pouvons également utiliser les rotateX, rotateYet les rotateZfonctions, comme ceci:
Voir l'explication de Pen Transform par CSS-Tricks (@ css-tricks) sur CodePen.
Traduire
.element ( transform: translate(20px, 10px); )Cette fonction de transformation déplace un élément sur le côté, ou de haut en bas. Pourquoi ne pas simplement utiliser haut / gauche / bas / droite? Eh bien, c'est parfois un peu déroutant. Je penserais à cela comme une mise en page / positionnement (ils ont de toute façon une meilleure prise en charge du navigateur) et cela comme un moyen de déplacer ces éléments dans le cadre d'une transition ou d'une animation.
Ces valeurs seraient n'importe quelle valeur de longueur, comme 10px ou 2.4em. Une valeur déplacera l'élément vers la droite (valeurs négatives vers la gauche). Si une deuxième valeur est fournie, cette deuxième valeur la déplacera vers le bas (valeurs négatives vers le haut). Ou, vous pouvez être précis:
transform: translateX(value); transform: translateY(value);Il est important de noter qu'un élément utilisant transformne fera pas circuler d'autres éléments autour de lui. En utilisant la translatefonction ci-dessous et en déplaçant le carré vert hors de sa position d'origine, nous remarquerons comment le texte environnant restera fixe en place, comme si le carré était un élément de bloc:
Voir l'explication de Pen Transform par CSS-Tricks (@ css-tricks) sur CodePen.
Il convient également de noter que translatele matériel sera accéléré si vous souhaitez animer cette propriété, contrairement à position: absolute.
Valeurs multiples
Avec une liste séparée par des espaces, vous pouvez ajouter plusieurs valeurs à la transformpropriété:
.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )Il convient de noter qu'il existe un ordre dans lequel ces transformations seront effectuées, dans l'exemple ci-dessus, «skew» sera effectué en premier, puis l'élément sera mis à l'échelle.
Matrice
La matrixfonction de transformation peut être utilisée pour combiner toutes les transformations en une seule. C'est un peu comme transformer la sténographie, mais je ne pense pas que ce soit vraiment destiné à être écrit à la main. Il existe des outils comme The Matrix Resolutions, qui peuvent convertir un groupe de transformations en une seule déclaration de matrice. Peut-être que dans certaines situations, cela peut réduire la taille du fichier, bien que des micro-optimisations peu conviviales pour les auteurs comme celle-ci ne valent probablement pas votre temps.
Pour les curieux, ceci:
rotate(45deg) translate(24px, 25px)peut également être représenté comme:
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)Transformations 3D
La plupart des propriétés ci-dessus ont des versions 3D.
translate3d(x, y, z) translateZ(z)La troisième valeur dans translate3dou la valeur dans translateZdéplace l'élément vers le spectateur, les valeurs négatives à l'écart.
scale3d(sx, sy, sz) scaleZ(sz)La troisième valeur dans scale3dou la valeur dans scaleZaffecte la mise à l'échelle le long de l'axe z (par exemple, la ligne imaginaire sortant tout droit de l'écran).
rotateX(value) rotateY(value) rotate3d(x, y, z)rotateXet rotateYfera pivoter un élément dans l'espace 3D autour de ces axes. rotate3dvous permet de spécifier un point dans l'espace 3D dans lequel faire pivoter l'élément.
matrix3d(… )Une façon de décrire par programme une transformation 3D dans une grille 4 × 4. Personne n'en écrira jamais un.
perspective(value)Cette valeur n'affecte pas l'élément lui-même, mais elle affecte les transformations des transformations 3D des éléments descendants, ce qui leur permet d'avoir toutes une perspective de profondeur cohérente.
Plus d'information
- MDN Docs sur la transformation et l'utilisation.
- Documentation de David DeSandro sur les transformations 3D
- Surfin 'Safari: les transformations 3D
- Spécification W3C sur les transformations CSS3
- Introduction aux transformations CSS 3D
Prise en charge du navigateur
Transformations 2D
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3.1+ | 3,5+ | 10,5+ | 9+ | 4.1+ | Au moins 4 |
Transformations 3D
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 4+ | 12+ | rien | 10+ | 4.1+ | 5+ |
Préfixes de fournisseur
.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )