Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre CSS » Transformations CSS

Sommaire
  1. Les transformations CSS c'est quoi ?
  2. Propriété transform
    1. Translation : fonction translate()
    2. Mise à l'échelle : fonction scale()
    3. Rotation : fonction rotate()
    4. Inclinaison : fonction skew()
    5. Matrice de transformation : fonction matrix()
  3. Propriété transform-origin
  4. Les fonctions 3D
    1. Fonctions 3d propriété transform
    2. Fonction perspective()
    3. Propriété perspective
    4. Propriété perspective-origin
    5. Propriété transform-style
    6. Propriété backface-visibility
  5. Quiz sur les transformations CSS
  6. Aller plus loin
Télécharger ce cours en pdf

👉 Les transformations CSS c'est quoi ?

Faisant partie du module CSS Transforms Level 1, toujours en version de travail, les transformations CSS permettent, en modifiant l'espace des coordonnées, de changer la position d'un contenu sans altérer le flux du document, que ce soit dans un espace en deux ou trois dimensions.

Il existe une propriété qui va se charger de spécifier l'espace des coordonnées : il s'agit de la propriété transform. Chaque transformation ayant le plus souvent besoin d'un point d'origine, nous utiliserons en corrélation la propriété transform-origin. Pour un espace en trois dimensions, il faudra faire appel à d'autres propriétés que nous verrons dans le chapitre correspondant.

👉 Propriété transform

La propriété tranform permet donc de modifier l'espace de coordonnées d'un point de vue purement visuel. Ainsi, allons-nous pouvoir manipuler un élément sur les axes X et Y via différentes fonctions :

Fonction translate() :

Cette fonction permet de déplacer un élément vers la gauche ou la droite et vers le haut ou en bas, selon les coordonnées X et Y.

Tandis que l'axe X avec une valeur positive va déplacer l'élément vers la droite ou vers la gauche avec une valeur négative, l'axe Y, quant à lui, va déplacer l'élément vers le bas avec une valeur positive et vers le haut avec une valeur négative.

Un exemple ci-dessous (passez la souris) :



.ex-trans{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

.ex-trans:hover{

transform:translate(50px)

}


L'axe Y est optionnel, nous ne l'avons pas renseigné dans l'exemple. Si on le renseigne, les deux axes vont logiquement être pris en compte (passez votre souris) :



.ex-trans{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

.ex-trans:hover{

transform:translate(20px,20px)

}


NB : la fonction translate() est très utile pour centrer un élément.


Fonction scale() :

Cette fonction permet d'augmenter ou de diminuer la taille d'un élément. Un exemple ci-dessous (passez votre souris) :



<div class=ex-scale></div>




.ex-scale {
background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}
	
.ex-scale:hover {
	
  transform: scale(2) /*agit sur axe X et Y*/
	  
}
	

Par défaut, la valeur de la fonction scale() est 1. Plus le chiffre est élevé, plus l'élément sera agrandi et vice-versa. Les valeurs négatives sont acceptées.

Par ailleurs, cette fonction agit sur les axes X et Y par défaut, mais ceux-ci peuvent être manipulés indépendamment avec les fonctions scaleX() et scaleY().

Même exemple avec les deux fonctions précitées (passez votre souris) :

scalex


.ex-scale-x{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

.ex-scale-x:hover{

transform: scalex(2)

}	
	

scaley


.ex-scale-y{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

	
.ex-scale-y:hover {
	
  transform: scaley(2)
	  
}
	

On peut également simuler l'effet flip (obtenu avec les transformations 3d) avec une valeur négative :

scalex flip
scaley flip


.ex-scale-flipx,.ex-scale-flipy{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

	
.ex-scale-flipx:hover {
	
  transform: scalex(-1)
	  
}

.ex-scale-flipy:hover {
	
  transform: scaley(-1)
	  
}	


Fonction rotate() :

Cette fonction permet à un élément de tourner sur lui-même selon le sens des aiguilles d'une montre (et inversement). La rotation est exprimée en degrés (unité deg) de manière positive ou négative, avec l'unité turn, rad (radians) ou encore grad (grades) .

unité deg
unité turn
unité grad
unité rad



.deg:hover{

transform:rotate(45deg)

}

.turn:hover{

transform:rotate(.15turn)

}	

.grad:hover{

transform:rotate(50grad)

}

.rad:hover{

transform:rotate(.7854rad)

}
	


Fonction skew() :

Cette fonction, qui s'applique uniquement avec les fonctions skewx() et skewy(), permet d'incliner un élément respectivement de manière horizontale et verticale. On utilise les dégrés pour unité.

Un exemple d'inclinaison horizontale vers la gauche (valeur positive) ci-dessous (passez votre souris) :



.ex-skewx{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

	
.ex-skewx:hover{

	transform: skewx(15deg)
	
	}
	

Un exemple d'inclinaison verticale ci-dessous (passez votre souris) :



.ex-skewy{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

	
.ex-skewy:hover{

	transform: skewy(15deg)
	
	}
	


Fonction matrix() :

Cette fonction permet de réaliser les mêmes transformations que nous venons de voir. Seule la syntaxe change. En effet, elle repose sur des coefficients.

Elle se compose de cette manière :



.class{

transform:matrix(a, b, c, d, X, Y);

}


  • a = fonction scalex()
  • b = fonction skewy()
  • c = fonction skewx()
  • d = fonction scaley()
  • x = fonction translatex()
  • y = fonction translatey()

Avec la fonction matrix(), la rotation se définit de cette manière :



.class{

transform : matrix(cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0);

}



NB : Il faudra convertir les angles en degrés (ou autre unités que l'on a vues avec la fonction rotate()). Voici un convertisseur assez pratique.

Ci-dessous, un exemple simple d'une rotation de 45 degrés :



.ex-matrix{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

	
.ex-matrix:hover{

	transform: matrix(.707107, .707107, -.707107, .707107, 0, 0)
	
	/*équivalent à */
	
	transform: rotate(45deg)
	
	}
	

Tout comme il est possible de combiner plusieurs fonctions avec la propriété transform, vous pouvez combiner les différentes fonctions de transformations en une seule avec la méthode matricielle.

Dans l'exemple ci-dessous, nous avons combiné les fonctions scale() et skewx() (passez votre souris) :



.ex-matrix1{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

.ex-matrix1:hover{

transform : matrix(2, 0, .866025, 2, 0, 0);

	
	/*équivalent à */
	
	transform:scale(2) skewX(45deg)
	
	}
	

👉 La propriété transform-origin

La propriété transform-origin fonctionne de pair avec de la propriété transform. Elle permet de contrôler l'origine du repère de la transformation 2d ou 3d d'un élément.

Par défaut, pour une transformation 2d la valeur est au centre de l'élément 50% 50% et pour une transformation 3d la valeur correspond à 50% 50% 0.

La propriété transform-origin peut être définie en utilisant soit une, deux ou trois valeurs.

La nouvelle origine de l'élément peut être définie en tant que longueur (px, em, rem, cm...), pourcentage, mot-clés (left, center, right, top, bottom) à partir du coin supérieur gauche de l'élément. Les valeurs négatives sont acceptées.

Exemple avec la fonction rotate() :

transform-origin:50% 50%
transform-origin:0 0
transform-origin:100% 0
transform-origin:0 100%

Exemple avec la fonction scale() :

transform-origin:50% 50%
transform-origin:0 0
transform-origin:100% 0
transform-origin:0 100%

Exemple avec les fonctions skewx() et skewy() (trois dimensions) :

transform-origin:50% 50%
transform-origin:0 0
transform-origin:100% 0%
transform-origin:0% 100%
transform-origin:50% 50%
transform-origin:0 0
transform-origin:100% 0%
transform-origin:0% 100%

👉 Les fonctions 3D

La plupart des fonctions que nous avons vues possèdent leur version en 3 dimensions. Une troisième axe apparaît alors, à savoir l'axe Z.

Fonctions 3d de la propriété transform :
  • matrix3d()
  • rotatex(), rotatey() et rotatez()
  • translatex(), translatey(), translatez() et translate3d()
  • scalex(), scaley() et scale3d()
  • skewx() et skewy()

Exemple avec la fonction matrix3d(). Cette fonction utilise un système de grille 4x4 (16 valeurs) :



.trans3d-matrix{

background: #7A5FFF;
width: 100px;
height: 100px;	
margin: 5rem auto;
transition: transform 1s

}

.trans3d-matrix:hover{

transform:matrix3d(
1,0,0,0,
.36397,.707107,.707107,0, 
0,-.707107,.707107,0, 
0,0,0,1)

	
	/*équivalent à */
	
	transform:rotatex(45deg) skewx(20deg)
	
	}
	


Fonction perspective() :

Contrairement à la propriété perspective, la fonction perspective() représente l'élément transformé et non celui de son élément transformé parent. De ce fait, la transformation, via la propriété transform, va s'appliquer à cet élément et non à ses enfants.

Cette fonction se présente de cette manière :




.class{

width: 200px;
height: 200px;
background: #7A5FFF;
transform: perspective(600px) rotatey(45deg);

}


Ce qui donne :

Exemple perpective

La valeur contenue dans la fonction perspective() va définir la distance entre le spectateur et l'objet. Plus la valeur sera grande, plus la distance le sera aussi et inversement. La valeur obtenue comme résultat de cette fonction est de type <transform-function>, autrement dit les fonctions 3d de la propriété transform.


Propriété perspective :

La propriété perspective produit le même effet que la fonction perspective(), mais à la différence que la transformation va s'appliquer aux éléments enfants et non à l'élément lui-même comme c'est le cas avec la fonction perspective(). Cela va s'avérer particulièrement utile si l'on souhaite appliquer des transformations sur plusieurs éléments enfants ayant la même perspective car chaque élément possède sa propre prespective ainsi que son point de fuite.

Exemple perspective 100px :

translatez(20px)
rotateX(45deg)
rotateY(45deg)
rotateZ(45deg)

Propriété perspective-origin :

Fonctionnant conjointement avec la propriété perspective ou la fonction du même nom, la propriété perspective-origin détermine le point de fuite d'un élément transformé.

Par défaut, le point de fuite d'un espace en trois dimensions est positionné au centre (perspective-origin: 50% 50%). Le nouveau point de fuite de l'élément peut être défini avec une ou deux valeurs, soit l'abscisse et/ou l'ordonnée. Dans les deux cas, les valeurs sont en pourcentage ou avec un mot-clé. Les valeurs négatives sont acceptées.

Un exemple ci-dessous :

Exemple perpective


.class{

width: 200px;
height: 200px;
background: #7A5FFF;
transform: perspective(600px) rotatey(45deg);
transform-origin: 50% 200%
}



Propriété transform-style :

La propriété transform-style permet de définir le style de la transformation en trois dimensions. Elle possède deux valeurs :

  • flat : par défaut. Les éléments enfants n'ont pas d'espace tridimensionnel propre.
  • preserve-3d : indique que les éléments doivent être ciblés dans l'espace tridimensionnel par l'élément parent.
Voir caroussel 3D sur ce blog
Propriété backface-visibility :

La propriété backface-visibility indique si la face arrière d'un élément est visible ou non. Elle possède deux valeurs :

  • visible : indique que la face arrière est visible lorsqu'elle est tournée vers l'utilisateur. Cela permet d'obtenir un effet miroir sur la face avant.
  • hidden : indique que la face arrière n'est pas visible. La face avant est donc cachée.
Voir un exemple sur ce blog

👉 Quiz sur les transformations CSS

Question : Quelle est la propriété permettant de déclarer une transformation ?


Question : Quelle fonction permet de déplacer un élément vers la gauche ou la droite et vers le haut ou en bas ?


Question : Quelle type de données utilise t-on avec la fonction skew() ?


Question : Que permet de faire la propriété transform-origin ?


Question : Avec quelle propriété détermine t-on le point de fuite d'un espace en trois dimensions ?

👉 Aller plus loin

Comprendre la fonction matrix() (EN)

3d transforms (EN).