CSS Transform

Un tutoriel par Quentin Parmentier, Thibaud Grepin et Morgan Dubois.

INTRODUCTION

Présentation

La propriété transform() est une propriété css qui permet de manipuler visuellement des élements. Les manipulations possibles sont le changement de position, la rotation, l'agrandissement (ou le rétrécissement), le "penchement" des angles et la perspective. Toutes ces propriétés seront présentés de manières simples, puis elles seront animées pour une meilleure compréhension.

Valeurs possibles

Valeur Description
translate(x, y) Transforme la position d'un élément aux coordonnées (x,y) Tester
translate3d(x, y, z) Transforme la position d'un élément aux coordonnées (x,y,z) Tester
translateX(x) Transforme la position d'un élément sur l'axe x Tester
translateY(y) Transforme la position d'un élément sur l'axe y Tester
translateZ(z) Transforme la position d'un élément sur l'axe z Tester
rotate(angle) Transforme l'angle d'un élément en 2D Tester
rotate3d(x, y, z, angle) Transforme l'angle d'un élément en 3D Tester
rotateX(angle) Transforme l'angle d'un élément sur l'axe x Tester
rotateY(angle) Transforme l'angle d'un élément sur l'axe y Tester
rotateZ(angle) Transforme l'angle d'un élément sur l'axe z Tester
scale(x, y) Transforme la taille d'un élément selon les axes x et y Tester
scale3d(x, y, z) Transforme la taille d'un élément selon les axes x, y et z Tester
scaleX(x) Transforme la taille d'un élément selon l'axe x Tester
scaleY(y) Transforme la taille d'un élément selon l'axe y Tester
scaleZ(z) Transforme la taille d'un élément selon l'axe z Tester
skew(x-angle, y-angle) Effectue une distortion d'un élément selon les axes x et y Tester
skewX(x-angle) Effectue une distortion d'un élément selon l'axe x Tester
skewY(y-angle) Effectue une distortion d'un élément selon l'axe y Tester
perspective(n) Transforme la perspective 3D d'un élément Tester
matrix(a, b, c, d, tx, ty) Transforme un élément en 2D en utilisant une matrice de 6 valeurs Tester
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) Transforme un élément en 3D en utilisant une matrice 4x4 de 16 valeurs Tester
none Définie qu'il ne devrait pas y avoir de transformation
initial Met la propriété à sa valeur par défaut
inherit Définie que l'élément hérite de la propriété de son parent

Valeurs possibles

Les nombres dans le tableau correspondent à la première version sur laquelle la propriété est totalement supporté. Les nombres suivies de -webkit- -ms- -moz- -o- correspondent à la première version ou la propriété est supporté avec le préfix correspondant.

Navigateurs Google Chrome Internet Explorer Mozilla Firefox Safari Opera
Transform2D 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
Transform3D 36.0
12.0 -webkit-		 12.0 10 9.0
4.0 -webkit-		 23.0
15.0 -webkit-

TRANSLATE

Translate(x, y)

La valeur translate permet de modifier un élement depuis sa position actuel à une nouvelle position sur les axes x et y.

Exemple générique

  
  .element{
    transform: translate(x, y);
    -o-transform: translate(x, y);
    -moz-transform: translate(x, y);
    -webkit-transform: translate(x, y);
    -ms-transform: translate(x, y);
  }

Exemple live

See the Pen Translate by quentin (@quentinprm) on CodePen.

Translate3d(x, y, z)

La valeur translate permet de modifier un élement depuis sa position actuel à une nouvelle position sur les axes x, y et z. Pour voir la transformation 3D on doit appliquer de la perspective.

Exemple générique

  
  .element{
    transform: perspective(n) translate(x, y, z);
    -o-transform: perspective(n) translate(x, y, z);
    -moz-transform: perspective(n) translate(x, y, z);
    -webkit-transform: perspective(n) translate(x, y, z);
    -ms-transform: perspective(n) translate(x, y, z);
  }

Exemple live

See the Pen Translate 3D by quentin (@quentinprm) on CodePen.

TranslateX(x)

La valeur translate permet de modifier un élement depuis sa position actuel à une nouvelle position sur l'axe x.

Exemple générique

  
  .element{
    transform: translateX(x);
    -o-transform: translateX(x);
    -moz-transform: translateX(x);
    -webkit-transform: translateX(x);
    -ms-transform: translateX(x);
  }

Exemple live

See the Pen Translate X by quentin (@quentinprm) on CodePen.

TranslateY(y)

La valeur translate permet de modifier un élement depuis sa position actuel à une nouvelle position sur l'axe y.

Exemple générique

  
  .element{
    transform: translateY(y);
    -o-transform: translateY(y);
    -moz-transform: translateY(y);
    -webkit-transform: translateY(y);
    -ms-transform: translateY(y);
  }

Exemple live

See the Pen Translate Y by quentin (@quentinprm) on CodePen.

TranslateZ(z)

La valeur translate permet de modifier un élement depuis sa position actuel à une nouvelle position sur l'axe z. Pour voir la transformation on doit appliquer de la perspective.

Exemple générique

  
  .element{
    transform: perspective(n) translateZ(z);
    -o-transform: perspective(n) translateZ(z);
    -moz-transform: perspective(n) translateZ(z);
    -webkit-transform: perspective(n) translateZ(z);
    -ms-transform: perspective(n) translateZ(z);
  }

Exemple live

See the Pen Translate Z by quentin (@quentinprm) on CodePen.

ROTATE

Rotate(angle)

La valeur rotate permet de modifier l'angle d'un élément dans un repére 2D. L'angle est exprimé en degrès (deg).

Exemple générique

  
  .element{
    transform: rotate(angle);
    -o-transform: rotate(angle);
    -moz-transform: rotate(angle);
    -webkit-transform: rotate(angle);
    -ms-transform: rotate(angle);
  }

Exemple live

See the Pen Rotate by Thibaud (@ThibaudG) on CodePen.

Rotate3d(x, y, z, angle)

La valeur rotate3d permet de modifier l'angle d'un élément dans un repére 3D sur les axes x, y et z. L'angle est exprimé en degrès (deg).

Exemple générique

  
  .element{
    transform: rotate3d(x, y, z, angle);
    -o-transform: rotate3d(x, y, z, angle);
    -moz-transform: rotate3d(x, y, z, angle);
    -webkit-transform: rotate3d(x, y, z, angle);
    -ms-transform: rotate3d(x, y, z, angle);
  }

Exemple live

See the Pen Rotate3d by Thibaud (@ThibaudG) on CodePen.

RotateX(angle)

La valeur rotateY permet de modifier l'angle d'un élément sur l'axe x. L'angle est exprimé en degrès (deg).

Exemple générique

  
  .element{
    transform: rotateX(angle);
    -o-transform: rotateX(angle);
    -moz-transform: rotateX(angle);
    -webkit-transform: rotateX(angle);
    -ms-transform: rotateX(angle);
  }

Exemple live

See the Pen RotateX by Thibaud (@ThibaudG) on CodePen.

RotateY(angle)

La valeur rotateZ permet de modifier l'angle d'un élément sur l'axe y. L'angle est exprimé en degrès (deg).

Exemple générique

  
  .element{
    transform: rotateY(angle);
    -o-transform: rotateY(angle);
    -moz-transform: rotateY(angle);
    -webkit-transform: rotateY(angle);
    -ms-transform: rotateY(angle);
  }

Exemple live

See the Pen RotateY by Thibaud (@ThibaudG) on CodePen.

RotateZ(angle)

La valeur rotateX permet de modifier l'angle d'un élément sur l'axe z. L'angle est exprimé en degrès (deg).

Exemple générique

  
  .element{
    transform: rotateZ(angle);
    -o-transform: rotateZ(angle);
    -moz-transform: rotateZ(angle);
    -webkit-transform: rotateZ(angle);
    -ms-transform: rotateZ(angle);
  }

Exemple live

See the Pen RotateZ by Thibaud (@ThibaudG) on CodePen.

SCALE

Scale(x, y)

La valeur scale permet de modifier la taille d'un élément sur les axes x et y. Les valeurs x et y sont des nombres.

Exemple générique

  
  .element{
    transform: scale(x, y);
    -o-transform: scale(x, y);
    -moz-transform: scale(x, y);
    -webkit-transform: scale(x, y);
    -ms-transform: scale(x, y);
  }

Exemple live

See the Pen Scale by Morgan (@Morgandbs) on CodePen.

Scale3d(x, y, z)

La valeur scale permet de modifier la taille d'un élément sur les axes x et y. Pour pouvoir afficher cette transformation, il faut appliquer de la perspective ainsi que modifier sa position sur l'axe z. Les valeurs x, y, z et n sont des nombres.

Exemple générique

  
  .element{
    transform: perspective(n) scale3d(x, y, z) translateZ(z);
    -o-transform: perspective(n) scale3d(x, y, z) translateZ(z);
    -moz-transform: perspective(n) scale3d(x, y, z) translateZ(z);
    -webkit-transform: perspective(n) scale3d(x, y, z) translateZ(z);
    -ms-transform: perspective(n) scale3d(x, y, z) translateZ(z);
  }

Exemple live

See the Pen Scale3d by Morgan (@Morgandbs) on CodePen.

ScaleX(x)

La valeur scaleX permet de modifier la taille d'un élément sur l'axe x. La valeur x est un nombre.

Exemple générique

  
  .element{
    transform: scaleX(x);
    -o-transform: scaleX(x);
    -moz-transform: scaleX(x);
    -webkit-transform: scaleX(x);
    -ms-transform: scaleX(x);
  }

Exemple live

See the Pen ScaleX by Morgan (@Morgandbs) on CodePen.

ScaleY(y)

La valeur scaleY permet de modifier la taille d'un élément sur l'axe y. La valeur y est un nombre.

Exemple générique

  
  .element{
    transform: scaleY(y);
    -o-transform: scaleY(y);
    -moz-transform: scaleY(y);
    -webkit-transform: scaleY(y);
    -ms-transform: scaleY(y);
  }

Exemple live

See the Pen ScaleY by Morgan (@Morgandbs) on CodePen.

ScaleZ(z)

La valeur scaleZ permet de modifier la taille d'un élément sur l'axe z. Pour pouvoir afficher cette transformation, il faut appliquer de la perspective ainsi que modifier sa position sur l'axe z. Les valeurs z et n sont des nombres.

Exemple générique

  
  .element{
    transform: perspective(n) scaleZ(z) translateZ(z);
    -o-transform: perspective(n) scaleZ(z) translateZ(z);
    -moz-transform: perspective(n) scaleZ(z) translateZ(z);
    -webkit-transform: perspective(n) scaleZ(z) translateZ(z);
    -ms-transform: perspective(n) scaleZ(z) translateZ(z);
  }

Exemple live

See the Pen ScaleZ by Morgan (@Morgandbs) on CodePen.

Skew

Skew(x-angle, y-angle)

La valeur skew permet d'effectuer une distortion d'un élément sur les axes x et y. Les valeurs x-angle et y-angle sont exprimées en deg.

Exemple générique

  
  .element{
    transform: skew(x-angle, y-angle);
    -o-transform: skew(x-angle, y-angle);
    -moz-transform: skew(x-angle, y-angle);
    -webkit-transform: skew(x-angle, y-angle);
    -ms-transform: skew(x-angle, y-angle);
  }

Exemple live

See the Pen Skew by Morgan (@Morgandbs) on CodePen.

SkewX(x-angle)

La valeur skewX permet d'effectuer une distortion d'un élément sur l'axe x. La valeur x-angle est exprimée en deg.

Exemple générique

  
  .element{
    transform: skewX(x-angle);
    -o-transform: skewX(x-angle);
    -moz-transform: skewX(x-angle);
    -webkit-transform: skewX(x-angle);
    -ms-transform: skewX(x-angle);
  }

Exemple live

See the Pen SkewX by Morgan (@Morgandbs) on CodePen.

SkewY(y-angle)

La valeur skewY permet d'effectuer une distortion d'un élément sur l'axe y. La valeur y-angle est exprimée en deg.

Exemple générique

  
  .element{
    transform: skewY(y-angle);
    -o-transform: skewY(y-angle);
    -moz-transform: skewY(y-angle);
    -webkit-transform: skewY(y-angle);
    -ms-transform: skewY(y-angle);
  }

Exemple live

See the Pen SkewY by Morgan (@Morgandbs) on CodePen.

PERSPECTIVE

Perspective(n)

La valeur perspective permet de modifier la perspective d'un élément dans un plant 3D. Pour pouvoir voir cette transformation il faut effectuer une rotation sur l'élement. La valeur n est un nombre.

Exemple générique

  
  .element{
    transform: perspective(n) rotate(angle);
    -o-transform: perspective(n) rotate(angle);
    -moz-transform: perspective(n) rotate(angle);
    -webkit-transform: perspective(n) rotate(angle);
    -ms-transform: perspective(n) rotate(angle);
  }

Exemple live

See the Pen Perspective by Morgan (@Morgandbs) on CodePen.

Matrix

Matrix(a, b, c, d, tx, ty)

La valeur matrix permet de combiner plusieurs transformations dans un repère 2D. Elle est définie par 6 coeficients, les a, b, c et d étant des nombres qui définissent la transformation linéaire. Les valeurs tx et ty sont des nombres définissant la translation à appliquer. Un outil en ligne permettant de convertir la combinaison de transformation en matrix ce trouve ici.

Exemple

  
  .element{
    transform: rotate(45deg) translate(24px,25px);
    -o-transform: rotate(45deg) translate(24px,25px);
    -moz-transform: rotate(45deg) translate(24px,25px);
    -webkit-transform: rotate(45deg) translate(24px,25px);
    -ms-transform: rotate(45deg) translate(24px,25px);
  }

Nous donnes...

  
  .element{
    transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482);
    -o-transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482);
    -moz-transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482);
    -webkit-transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482);
    -ms-transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482);
  }

Exemple live

See the Pen Matrix by Morgan (@Morgandbs) on CodePen.

Matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

La valeur matrix3d permet de combiner plusieurs transformations dans un repère 3D. Elle est définie par 16 coeficients, composant une matrice 4x4. Les valeur a1, b1 , c1, d1, a2, b2, c2, d2, a3, b3, c3, et d3 sont des nombres qui définissent la transformation linéaire. Les valeurs a4, b4, c4, d4 sont des nombres définissant la translation à appliquer. Un outil en ligne permettant de convertir en matrix ce trouve ici.

Exemple

  
  .element{
    transform: rotateZ(45deg) translate(24px, 25px) perspective(500);
    -o-transform: rotateZ(45deg) translate(24px, 25px) perspective(500);
    -moz-transform: rotateZ(45deg) translate(24px, 25px) perspective(500);
    -webkit-transform: rotateZ(45deg) translate(24px, 25px) perspective(500);
    -ms-transform: rotateZ(45deg) translate(24px, 25px) perspective(500);
  }

Nous donnes...

  
  .element{
    transform: matrix3d(0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0.00141421, -0.0692965, 1, -0.002, -0.707107, 34.6482, 0, 1);
    -o-transform: matrix3d(0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0.00141421, -0.0692965, 1, -0.002, -0.707107, 34.6482, 0, 1);
    -moz-transform: matrix3d(0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0.00141421, -0.0692965, 1, -0.002, -0.707107, 34.6482, 0, 1);
    -webkit-transform: matrix3d(0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0.00141421, -0.0692965, 1, -0.002, -0.707107, 34.6482, 0, 1);
    -ms-transform: matrix3d(0.707107, 0.707107, 0, 0, -0.707107, 0.707107, 0, 0, 0.00141421, -0.0692965, 1, -0.002, -0.707107, 34.6482, 0, 1);
  }

Exemple live

See the Pen Matrix3d by Morgan (@Morgandbs) on CodePen.

Sources

Voici quelques liens utiles pour aller plus loin:

Voici également quelques outils aidant à votre création:

  • Voici un site pour vous aidez à résoudre des matrices et matrices 3D, vous le trouverez ici.
  • Sur ce site vous trouverez tout un tas de snippet pour vous aidez dans vos créations, le lien ici.
  • Ce site est la pour construire les propriétés de manière visuel, le lien ici.

Merci d'avoir suivi notre tutoriel, nous espérons avoir répondu à vos questions.