Quelles transformations ?
Il existe plusieurs types de transformation CSS 2D :
-
rotate(angle)
permet d’appliquer une rotation. -
scale(x,y)
,scaleX(x)
etscaleY(y)
permettent de mettre à l’échelle. -
skewX(angle)
etskewY(angle)
permettent d’incliner un élément. -
translate(x,y)
,translateX(x)
ettranslateY(y)
permettent d’appliquer une translation. -
matrix(a, c, b, d, x, y)
spécifie une matrice de transformation.
La syntaxe
transform: rotate(50deg);
transform: rotate(50deg) skewX(30deg) translate(100px);
Axe de transformation ?
Par défaut, une transformation s’applique par rapport au centre de l’élément. Pour modifier cette valeur, utilisez transform-origin: x y
.
transform-origin: 30px top;
Dans cet exemple, le centre de transformation sera en haut et à 30px de la gauche.
Support des navigateurs
Actuellement, pour utiliser ces propriétés dans les navigateurs, vous devrez utiliser les préfixes propriétaires -webkit-
, -moz-
, -ms-
et -o-
:
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
Note :
- IE10, Firefox 16 et Opera 12.1 supportent les propriétés non-préfixées.