Transformations CSS 2D

Table des matières

    Afficher la table des matières

Transformations CSS 2D

Les transformations CSS vous permettent de déplacer, faire pivoter, mettre à l'échelle et incliner les éléments.

Passez la souris sur l'élément ci-dessous pour voir une transformation 2D :

<script> var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementById("rotate2D") clearInterval(rotINT) rotINT=setInterval("startRotate()",10) } function startRotate() { n=n+1 x.style.transform="rotate(" + n + "deg)" x.style.webkitTransform="rotate(" + n + "deg)" x.style.OTransform="rotate(" + n + "deg)" x.style.MozTransform="rotate(" + n + "deg)" if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} } }
2D rotate

Dans ce chapitre, vous découvrirez la propriété CSS suivante :

transform

Prise en charge du navigateur

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la propriété.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

Méthodes de transformation CSS 2D

Avec la propriété CSS transform vous pouvez utiliser les méthodes de transformation 2D suivantes :

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Conseil : Vous découvrirez les transformations 3D dans le chapitre suivant.

La méthode translate()

Translate

La méthode translate() déplace un élément de sa position actuelle (selon aux paramètres donnés pour l'axe X et l'axe Y).

L'exemple suivant déplace l'élément <div> de 50 pixels vers la droite, et 100 pixels en dessous de sa position actuelle :

Exemple

div
{
   
transform: translate(50px, 100px);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

La méthode rotate()

La méthode rotate() fait pivoter un élément dans le sens des aiguilles d'une montre ou dans le sens inverse selon un degré donné.

L'exemple suivant fait pivoter l'élément <div> dans le sens des aiguilles d'une montre de 20 degrés :

Exemple

div
{
  transform: rotate(20deg);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

L'utilisation de valeurs négatives fera pivoter l'élément dans le sens inverse des aiguilles d'une montre.

L'exemple suivant fait pivoter l'élément <div> dans le sens inverse des aiguilles d'une montre de 20 degrés :

Exemple

div
{
   
transform: rotate(-20deg);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

La méthode scale()

Scale

La méthode scale() augmente ou diminue la taille d'un élément (selon les paramètres donnés pour la largeur et la hauteur).

L'exemple suivant augmente l'élément <div> pour qu'il soit deux fois supérieur à sa largeur d'origine et trois fois supérieur à sa hauteur originale :

Exemple

div
{
   
transform: scale(2, 3);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

L'exemple suivant réduit l'élément <div> de la moitié de sa largeur et de sa hauteur d'origine :

Exemple

div
{
   
transform: scale(0.5, 0.5);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

La méthode scaleX()

La méthode scaleX() augmente ou diminue la largeur d'un élément.

L'exemple suivant augmente l'élément <div> pour qu'il soit deux fois supérieur à sa largeur d'origine :

Exemple

div
{
   
transform: scaleX(2);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

L'exemple suivant réduit l'élément <div> de la moitié de sa largeur d'origine :

Exemple

div
{
   
transform: scaleX(0.5);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

La méthode scaleY()

La méthode scaleY() augmente ou diminue la hauteur d'un élément.

L'exemple suivant augmente l'élément <div> pour qu'il soit trois fois supérieur à son élément d'origine. hauteur:

Exemple

div
{
   
transform: scaleY(3);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

L'exemple suivant réduit l'élément <div> à la moitié de son élément d'origine hauteur:

Exemple

div
{
   
transform: scaleY(0.5);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

La méthode skewX()

La méthode skewX() incline un élément le long de l'axe X de l'angle donné.

L'exemple suivant incline l'élément <div> de 20 degrés le long du Axe X :

Exemple

div
{
   
transform: skewX(20deg);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

La méthode skewY()

La méthode skewY() incline un élément le long de l'axe Y selon l'angle donné.

L'exemple suivant incline l'élément <div> de 20 degrés le long de l'axe Y :

Exemple

div
{
   
transform: skewY(20deg);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

La méthode skew()

La méthode skew() incline un élément le long des axes X et Y selon les angles donnés.

L'exemple suivant incline l'élément <div> de 20 degrés le long de l'axe X et de 10 degrés le long de l'axe Y :

Exemple

div
{
   
transform: skew(20deg, 10deg);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

Si le deuxième paramètre n'est pas spécifié, il a une valeur nulle. Ainsi, l’exemple suivant incline l’élément <div> de 20 degrés le long de l’axe X :

Exemple

div
{
   
transform: skew(20deg);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

La méthode matrix()

La méthode matrix() combine toutes les méthodes de transformation 2D en une seule.

La méthode matrice() prend six paramètres, contenant des fonctions mathématiques, qui vous permet de faire pivoter, redimensionner, déplacer (traduire) et incliner les éléments.

Les paramètres sont les suivants : Matrix(scaleX(), skewY(), skewX(), scaleY(), TranslateX(), TranslateY()).

Exemple

div
{
    
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

Propriétés de transformation CSS

Le tableau suivant répertorie toutes les propriétés de transformation 2D :

transform

Applique une transformation 2D ou 3D à un élément

transform-origin

Permet de changer la position sur les éléments transformés

Méthodes de transformation CSS 2D

matrix(n,n,n,n,n,n)

Définit une transformation 2D, en utilisant une matrice de six valeurs

translate(x,y)

Définit une translation 2D, déplaçant l'élément le long des axes X et Y

translateX(n)

Définit une translation 2D, déplaçant l'élément le long de l'axe X

translateY(n)

Définit une translation 2D, déplaçant l'élément le long de l'axe Y

scale(x,y)

Définit une transformation d'échelle 2D, en modifiant la largeur et la hauteur des éléments

scaleX(n)

Définit une transformation d'échelle 2D, modifiant la largeur de l'élément

scaleY(n)

Définit une transformation d'échelle 2D, modifiant la hauteur de l'élément

rotate(angle)

Définit une rotation 2D, l'angle est précisé dans le paramètre

skew(x-angle,y-angle)

Définit une transformation d'inclinaison 2D le long des axes X et Y

skewX(angle)

Définit une transformation d'inclinaison 2D le long de l'axe X

skewY(angle)

Définit une transformation d'inclinaison 2D le long de l'axe Y