Propriété CSS transform

La propriété transform spécifie la transformation bidimensionnelle ou tridimensionnelle de l'élément.

La propriété transform permet de faire pivoter, redimensionner, incliner ou traduire l'élément.

La propriété transform prend la valeur none ou une valeur de la liste des fonctions transform.

Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés.

Valeur initiale	none
Appliquée à	Éléments transformable.
Héritée	Non.
Animable	Oui. Degré est animable.
Version	CSS3
Syntaxe DOM	Object.style.transform = "rotate(10deg)";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété transform</h2>
    <div>Un élément</div>
  </body>
</html>

Essayez-vous-même!

Un exemple qui contient les valeurs "rotate", "skewY", "scaleY", "translateX", "skew" :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.box1 {
      width: 130px;
      height: 80px;
      border: 1px solid #000;
      background-color: #1c87c9;
      -ms-transform: rotate(30deg); /* IE 9 */
      -webkit-transform: rotate(30deg); /* Safari 3-8 */
      transform: rotate(30deg);
      }
      div.box2 {
      width: 120px;
      height: 80px;
      border: 1px solid #000;
      background-color: #8ebf42;
      -ms-transform: skewY(30deg); /* IE 9 */
      -webkit-transform: skewY(30deg); /* Safari 3-8 */
      transform: skewY(30deg);
      }
      div.box3 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #FFFF00;
      -ms-transform: scaleY(1); /* IE 9 */
      -webkit-transform: scaleY(1); /* Safari 3-8 */
      transform: scaleY(1);
      }
      div.box4 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #ccc;
      -ms-transform: rotate(160deg); /* IE 9 */
      -webkit-transform: rotate(160deg); /* Safari 3-8 */
      transform: rotate(160deg);
      }
      div.box5 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #990099;
      -ms-transform: translateX(50px); /* IE 9 */
      -webkit-transform: translate(50px); /* Safari 3-8 */
      transform: translateX(50px);
      }
      div.box6 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #FF0000;
      -ms-transform: skew(170deg,170deg); /* IE 9 */
      -webkit-transform: skew(170deg,170deg); /* Safari 3-8 */
      transform: skew(170deg,170deg);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transform</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <br>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <br>
    <h3>transform: scaleY(1):</h3>
    <div class="box3"></div>
    <br>
    <h3>transform: transform:rotate(160deg):</h3>
    <div class="box4"></div>
    <br>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <br>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, pour la compatibilité maximale des navigateurs les extensions -webkit- pour Safari, Google Chrome, et Opera sont utilisées.

Valeurs

Valeur	Description
none	Aucune transformation n'est appliquée.
translate()	Traduit l'élément par un vecteur [tx, ty]. Tx est la traduction le long de l'axe-x, et ty est la traduction le long de l'axe-y.
translateX()	Traduit l'élément le long de l'axe-x.
translateY()	Traduit l'élément le long de l'axe-y.
scale()	Incline un élément vers le haut ou vers le bas.
scaleX()	Incline un élément vers le haut dans la direction de l'axe-x.
scaleY()	Incline un élément vers le haut dans la direction de l'axe-y.
rotate(number)	Fait pivoter un élément dans l'espace bidimensionnelle. L'angle est spécifié dans le paramètre.
skew()	Spécifie une transformation en biais 2D le long de l'axe-x et de l'axe-y.
skewX	Spécifie une transformation en biais 2D le long de l'axe-x.
skewY	Spécifie une transformation en biais 2D le long de l'axe-y.
matrix()	Spécifie une transformation en biais 2D, en utilisant un matrice de six valeurs.
translateZ	Traduit un élément par le nombre donné le long de l'axe-z.
translate3d()	Spécifie une traduction tridimensionnelle.
scaleZ()	Incline un élément en biais la troisième dimension, le long de l'axe-z.
scale3d()	Spécifie une transformation tridimensionnelle qui est faite par incliner.
rotateX()	Fait pivoter un élément sur l'axe-x dans l'espace tridimensionnelle.
rotateY()	Fait pivoter un élément sur l'axe-y dans l'espace tridimensionnelle.
rotateZ()	Fait pivoter un élément sur l'axe-z dans l'espace tridimensionnelle.
rotate3d()	Spécifie une transformation tridimensionnelle qui est faite par faire pivoter.
matrix3d()	Spécifie une transformation 3D, en utilisant un matrice 4x4 de 16 valeurs.
perspective()	Spécifie un affichage perspectif pour l'élément tridimensionnel.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.