Blog iamvdo.meQuelles 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.
