English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attribut CSS transform s'applique à l'élément2D ou3D transformation. Cet attribut vous permet de faire pivoter, agrandir, déplacer, incliner, déplacer, pivoter, etc. un élément en deux ou trois dimensions.
Le tableau suivant décrit l'utilisation de cet attribut, l'historique des versions, ainsi que la syntaxe d'utilisation de cet attribut dans le script JavaScript.
| Valeur par défaut : | none |
|---|---|
| Appliqué à : | Éléments transformables |
| Héritage : | Non |
| Animable : | Est-ce que.Veuillez consulter Attributs d'animation。 |
| Version : | CSS3nouvelle fonction |
| JavaScript syntaxe : | object.style.transform="rotate(7deg) |
La syntaxe de cet attribut est la suivante :
transform: [ transform-function ] 1 ou plus de valeurs | none | initial | inherit
L'exemple suivant montre comment utiliser l'attribut transform.
img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px);
}Testez et voyez‹/›Le tableau suivant décrit les valeurs de cet attribut.
| Valeur | Description |
|---|---|
| translate(tx,ty) | Déplace l'élément le long des axes X et Y d'une quantité donnée. |
| translate3d(tx,ty,tz) | Déplace l'élément le long des axes X, Y et Z d'une quantité donnée. |
| translateX(tx) | Déplace l'élément le long de l'axe X d'une quantité donnée. |
| translateY(ty) | Déplace l'élément le long de l'axe Y d'une quantité donnée. |
| translateZ(tz) | Déplace l'élément le long de l'axe Z d'une quantité donnée. |
| rotate(a) | selon transform-L'attribut d'origine définit la rotation de l'élément autour de son origine spécifiée par un angle donné. |
| rotate3d(x,y,z, a) | Tourne l'élément autour de la direction vectorielle [x, y, z], selon l'angle spécifié dans le dernier paramètre.3Élément dans l'espace D. |
| rotateX(a) | Tourne l'élément autour de l'axe X d'un angle donné. |
| rotateY(a) | Tourne l'élément autour de l'axe Y d'un angle donné. |
| rotateZ(a) | Tourne l'élément autour de l'axe Z d'un angle donné. |
| scale(sx,sy) | Agrandit ou rétrécit la largeur et la hauteur de l'élément vers le haut ou vers le bas d'une quantité donnée. La fonction scale(1,1)invalide. |
| scale3d(sx,sy,sz) | Agrandit ou rétrécit l'élément le long des axes X, Y et Z d'une quantité donnée. La fonction scale3d(1,1,1)invalide. |
| scaleX(sx) | Agrandit ou rétrécit l'élément le long de l'axe X. |
| scaleY(sy) | Agrandit ou rétrécit l'élément le long de l'axe Y. |
| scaleZ(sz) | Agrandit ou rétrécit l'élément le long de l'axe Z. |
| skew(ax,ay) | Fait pencher l'élément le long des axes X et Y d'un angle donné. |
| skewX(ax) | Fait pencher l'élément le long de l'axe X d'un angle donné. |
| skewY(ay) | Fait pencher l'élément le long de l'axe Y d'un angle donné. |
| matrice(n,n,n,n,n,n) | Spécifié sous forme de matrice de transformation contenant six valeurs2Transformation D. |
| matrice(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | avec16valeurs4×4Spécifié sous forme de matrice de transformation3Transformation D. |
| perspective(longueur) | Définition3La perspective de l'élément de transformation D. Habituellement, avec l'augmentation de cette valeur de fonction, l'élément apparaît plus loin du spectateur. |
| none | Spécifiez que aucune transformation ne doit être appliquée. |
| initial | Réinitialisez cette propriété à sa valeur par défaut. |
| inherit | Si spécifié, l'élément lié utilise la valeur de la propriété transform de son élément parent. |
Compatibilité du navigateur pour la propriété transform, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.
|
Veuillez consulter les tutoriels suivants :CSS3 2Transformation D，CSS3 3Transformation D
Propriétés associées :backface-visibility，perspective，perspective-origin，transform-origin，transform-style。