Propriété CSS transform

La propriété CSS transform applique une transformation 2D ou 3D à un élément. C’est l’une des propriétés CSS3. Cette propriété permet de faire pivoter, incliner, mettre à l’échelle ou translater un élément. Elle prend la valeur none ou l’une des fonctions de transformation.

INFO

Les transformations peuvent être appliquées à n’importe quel élément, y compris les éléments block, flex, grid et inline.

Valeur initiale	none
S’applique à	Éléments transformables.
Héritée	Non.
Animable	Oui.
Version	CSS3
Syntaxe DOM	Object.style.transform = "rotate(10deg)";

Syntaxe

Valeurs de transform CSS

css

transform: none | transform-functions | initial | inherit;

Exemple de la propriété transform :

Exemple de code CSS transform

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px dashed #666;
        background-color: #8ebf42;
        transform: translate(10px, 40px) rotate(50deg);
        width: 130px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

Try it Yourself »

Résultat

CSS transform several values

Exemple de la propriété transform avec les valeurs "rotate", "skewY", "scaleY", "translateX", "skew" :

Exemple de plusieurs valeurs CSS transform

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 35px 20px;
      }
      div.box1 {
        width: 130px;
        height: 80px;
        border: 1px solid #000;
        background-color: #1c87c9;
        transform: rotate(30deg);
      }
      div.box2 {
        width: 120px;
        height: 80px;
        border: 1px solid #000;
        background-color: #8ebf42;
        transform: skewY(30deg);
      }
      div.box3 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FFFF00;
        transform: scaleY(1.5);
      }
      div.box4 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #ccc;
        transform: rotate(160deg);
      }
      div.box5 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #990099;
        transform: translateX(50px);
      }
      div.box6 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FF0000;
        transform: skew(170deg, 170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <h3>transform: scaleY(1.5):</h3>
    <div class="box3"></div>
    <h3>transform: rotate(160deg):</h3>
    <div class="box4"></div>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Try it Yourself »

La valeur "skew"

La valeur de transformation skew() est utilisée pour incliner un élément selon l’axe x et l’axe y. Les valeurs de transformation skewX() et skewY() sont utilisées pour incliner un élément selon l’axe x ou l’axe y.

La valeur "rotate"

Avec la valeur rotate(), l’élément est tourné dans le sens horaire à partir de sa position d’origine. L’utilisation d’une valeur négative le fait tourner dans le sens opposé.

La valeur "translate"

La valeur translate() déplace l’élément vers le haut ou vers le bas, ainsi que latéralement. D’autres valeurs sont présentées ci-dessous.

Valeurs

Valeur	Description	Essayez-le
none	Aucune transformation n’est appliquée.	Essayez-le »
translate()	Translate l’élément par un vecteur [tx, ty]. Tx est la translation selon l’axe x. Ty est la translation selon l’axe y.	Essayez-le »
translateX()	Translate l’élément selon l’axe x.	Essayez-le »
translateY()	Translate l’élément selon l’axe y.	Essayez-le »
scale(x, y)	Met un élément à l’échelle vers le haut ou vers le bas.	Essayez-le »
scaleX()	Met un élément à l’échelle selon l’axe x.	Essayez-le »
scaleY()	Met un élément à l’échelle selon l’axe y.	Essayez-le »
rotate(angle)	Fait pivoter un élément dans l’espace bidimensionnel. L’angle est spécifié dans le paramètre.	Essayez-le »
skew()	Définit une transformation d’inclinaison 2D selon l’axe x et l’axe y.	Essayez-le »
skewX()	Définit une transformation d’inclinaison 2D selon l’axe x.	Essayez-le »
skewY()	Définit une transformation d’inclinaison 2D selon l’axe y.	Essayez-le »
matrix()	Définit une transformation 2D à l’aide d’une matrice de six valeurs.	Essayez-le »
translateZ()	Translate un élément de la quantité donnée selon l’axe z.
translate3d()	Définit une translation tridimensionnelle.
scaleZ()	Met un élément à l’échelle dans la troisième dimension, selon l’axe z.
scale3d()	Définit une transformation d’échelle tridimensionnelle.
rotateX()	Fait pivoter un élément autour de l’axe x dans l’espace tridimensionnel.	Essayez-le »
rotateY()	Fait pivoter un élément autour de l’axe y dans l’espace tridimensionnel.	Essayez-le »
rotateZ()	Fait pivoter un élément autour de l’axe z dans l’espace tridimensionnel.	Essayez-le »
rotate3d()	Définit une transformation de rotation tridimensionnelle.
matrix3d()	Définit une transformation 3D à l’aide d’une matrice 4x4 de 16 valeurs.
perspective()	Définit une vue en perspective pour l’élément tridimensionnel.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Practice

Which statement is incorrect about transform properrty?

It can be applied to transformable elements.The transform property allows to rotate, scale, skew, or translate the element.It specifies only two-dimensional transformation of the element.

Propriété CSS transform ​

Syntaxe ​

Exemple de la propriété transform : ​

Résultat ​

Exemple de la propriété transform avec les valeurs "rotate", "skewY", "scaleY", "translateX", "skew" : ​

La valeur "skew" ​

La valeur "rotate" ​

La valeur "translate" ​

Valeurs ​

Practice ​