Propriété transformCSS3
Exemple
Faire pivoter des éléments div :
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari et Chrome */
}
Essayez-le vous-même »
Prise en charge des navigateurs
Le nombre dans le tableau indique la première version du navigateur qui prend en charge cette propriété.
Le nombre qui précède immédiatement -webkit-, -ms- ou -moz- est la première version du navigateur qui prend en charge la propriété préfixée.
| Propriété | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
Définition de la propriété et instructions d'utilisation
La propriété transform est utilisée pour appliquer des transformations 2D ou 3D à un élément. Cette propriété permet de faire pivoter, mettre à l'échelle, déplacer, incliner, etc. des éléments.
Pour mieux comprendre la propriété transform, veuillez consulter.
| Valeur par défaut : | none |
|---|---|
| Héritée : | non |
| version : | CSS3 |
| Syntaxe JavaScript : | object.style.transform="rotate(7deg)" |
Syntaxe
transform: none|transform-functions;
| Valeur | Description |
|---|---|
| none | Ne définit aucune transformation. |
| matrix(n,n,n,n,n,n) | Définit une transformation 2D, en utilisant une matrice de six valeurs. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Définit une transformation 3D, en utilisant une matrice 4x4 de 16 valeurs. |
| translate(x,y) | Définit une transformation 2D. |
| translate3d(x,y,z) | Définit une transformation 3D. |
| translateX(x) | Définit une transformation, en utilisant uniquement la valeur de l'axe X. |
| translateY(y) | Définit une transformation, en utilisant uniquement la valeur de l'axe Y. |
| translateZ(z) | Définit une transformation 3D, en utilisant uniquement la valeur de l'axe Z. |
| scale(x[,y]?) | Définit une transformation d'échelle 2D. |
| scale3d(x,y,z) | Définit une transformation d'échelle 3D. |
| scaleX(x) | Définit une transformation de mise à l'échelle en définissant une valeur pour l'axe X. |
| scaleY(y) | Définit une transformation de mise à l'échelle en définissant une valeur pour l'axe Y. |
| scaleZ(z) | Définit une transformation de mise à l'échelle 3D en définissant une valeur pour l'axe Z. |
| rotate(angle) | Définit une rotation 2D, avec l'angle spécifié dans le paramètre. |
| rotate3d(x,y,z,angle) | Définit une rotation 3D. |
| rotateX(angle) | Définit une rotation 3D autour de l'axe X. |
| rotateY(angle) | Définit une rotation 3D autour de l'axe Y. |
| rotateZ(angle) | Définit une rotation 3D autour de l'axe Z. |
| 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. |
| perspective(n) | Définit une vue en perspective pour les éléments transformés en 3D. |
Plus d’exemples
Cet exemple montre comment créer des photos "polaroid" et faire pivoter des images.
CSS3 Transform : diverses déformations et rotations
autres extensions