mozilla
Vos résultats de recherche

    transform

    Cette fonction est expérimentale
    Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
    Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

    Résumé

    La propriété CSS transform permet de modifier les coordonnées spatiales du modèle de formatage visuel de CSS. En l'utilisant, les éléments pourront subir des translations, rotations, homothéties ou être inclinées selon les valeurs définies.

    Si la valeur de la propriété est différente de none, un contexte d'empilement est créé. Dans ce cas l'objet se comportera comme un bloc contenant pour les éléments utilisant position: fixed qu'il contient.

    • Valeur initiale none
    • S'applique à éléments transformables
    • Héritée non
    • Pourcentages se rapporte à la taille de la boîte de l'élément
    • Média visual
    • Valeur calculée comme spécifié, mais avec les longueurs relatives transformées en longueur absolues
    • Animable oui, comme une transformation
    • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

    Syntaxe

    Syntaxe formelle : none | <transform-function>+
    
    transform: none
    transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
    transform: translate(12px, 50%)
    transform: translateX(2em)
    transform: translateY(3in)
    transform: scale(2, 0.5)
    transform: scaleX(2)
    transform: scaleY(0.5)
    transform: rotate(0.5turn)
    transform: skewX(30deg)
    transform: skewY(1.07rad)
    transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
    transform: translate3d(12px, 50%, 3em)
    transform: translateZ(2px)
    transform: scale3d(2.5, 1.2, 0.3)
    transform: scaleZ(0.3)
    transform: rotate3d(1, 2.0, 3.0, 10deg)
    transform: rotateX(10deg)
    transform: rotateY(10deg)
    transform: rotateZ(10deg)
    transform: perspective(17px)
    
    transform: translateX(10px) rotate(10deg) translateY(5px)
    

    Valeurs

    <transform-function>
    Une ou plusieurs des fonctions de transformation CSS sont appliquées. Voir ci-dessous.
    none
    Spécifie qu'aucune transformation ne doit être appliquée.

    Exemples

    Voir Utilisation des transformations CSS.

    Exemple en direct

     

     

     

    pre {
         width: 33em;
         border: solid red;
    
        -moz-transform: translate(100px) rotate(20deg);
        -moz-transform-origin: 60% 100%;
    
        -webkit-transform: translate(100px) rotate(20deg);
        -webkit-transform-origin: 60% 100%;
    
        -o-transform:translate(100px) rotate(20deg); 
        -o-transform-origin:60% 100%;
    
        -ms-transform: translate(100px) rotate(20deg);
        -ms-transform-origin: 60% 100%;
    
        transform: translate(100px) rotate(20deg);
        transform-origin: 60% 100%;
    }
    



    Fonctions de transformation CSS

    La propriété CSS transform permet que le système de coordonnées utilisé par un élément soit manipulé par une ou des fonctions de transformation. Ces fonctions sont décrites ci-dessous.

    matrix

    transform:  matrix(a, c, b, d, tx, ty)
    
    /* Où a, b, c, d construisent la matrice de transformation
       ┌     ┐ 
       │ a b │
       │ c d │
       └     ┘
       et tx, ty sont les valeurs de translation.  */
    

    Spécifie une transformation 2D grâce à six valeurs. Ceci est équivalent à appliquer la transformation matrix [a b c d tx ty].

    Note : Gecko (Firefox) accepte une valeur de <longueur> pour tx et ty. Webkit (Safari, Chrome) et Opera supportent actuellement un <number> sans unité pour tx et ty.

    Exemples en direct

     

     

     background: gold;  width: 30em;
    
        -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
          -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
             transform: matrix(1, -0.2, 0, 1, 0, 0);
    
     background: wheat;
     max-width: intrinsic;
    
        -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
     -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
          -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         -ms-transform: matrix(1, 0, 0.6, 1,  250, 0);
             transform: matrix(1, 0, 0.6, 1,  250, 0);
    

    Pour aller plus loin

    rotate

    transform:  rotate(angle);       /* un <angle>, p. ex.  rotate(30deg) */
    

    Applique une rotation dans le sens horaire autour de son origine (comme spécifiée par la propriété transform-origin) de l'angle spécifié. L'opération correspond à la matrice [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

    scale

    transform:  scale(sx[, sy]);     /* un ou deux <nombre>s sans unité, p. ex.  scale(2.1,4) */
    

    Spécifie une homothétie 2D décrite par [sx, sy]. Si sy n'est pas spécifiée, il est supposé qu'elle est égale à sx.

    scaleX

    transform:  scaleX(sx);          /* un <nombre> sans unité, p. ex.  scaleX(2.7) */
    

    Spécifie une homothétie utilisant le vecteur [sx, 1].

    scaleY

    transform:  scaleY(sy)           /* un <nombre> sans unité, p. ex.  scaleY(0.3) */
    

    Spécifie une homothétie utilisant le vecteur [1, sy].

    skew

    transform:  skew(ax[, ay])       /* un ou deux <angle>s, p. ex.  skew(30deg,-10deg) */
    

    Incline l'élément autour des axes X et Y des angles spécifiés. Si ay n'est pas définie, aucune inclinaison n'est réalisée suivant l'axe Y.

    Note : la fonction skew() était présente dans les premiers brouillons. Elle a depuis été retirée et est toujours présente sous une forme préfixée dans certaines implémentations. Ne l'utilisez pas.

    skewX

    transform:  skewX(angle)         /* un <angle>, p. ex.  skewX(-30deg) */
    

    Incline l'élément autour de l'axe X du l'angle spécifié.

    skewY

    transform:  skewY(angle)         /* un <angle>, p. ex.  skewY(4deg) */
    

    Incline l'élément autour de l'axe Y du l'angle spécifié.

    translate

    transform:  translate(tx[, ty])  /* une ou deux <longueur>s */
    

    Spécifie une translation 2D par le vecteur [tx, ty]. Si ty n'est pas spécifié, la valeur supposée est zéro.

    translateX

    transform:  translateX(tx)       /* voir <longuieur> pour les valeurs possibles */
    

    Translate l'élément de la quantité définie selon l'axe X.

    translateY

    transform:  translateY(ty)       /* voir <longueur> pour les valeurs possibles */
    

    Translate l'élément de la quantité définie selon l'axe Y.

    Spécifications

    Spécification Statut Commentaire
    CSS Transforms Level 1
    La définition de 'transform' dans cette spécification.
    Version de travail  

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base (Oui) -webkit 3.5 (1.9.1)-moz 10.0
    9.0 -ms
    10.5-o 3.1-webkit
    Support de la 3D 10.0-moz 12.0-webkit 10.0 Pas de support 4.0-webkit
    Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base ? ? ? ? ? ?

    Notes

    Internet Explorer 5.5 et plus supporte un filtre matriciel propriétaire qui peut être utilisé pour réaliser des effets similaires.

    Le support expérimental de skew() à été retiré de Gecko 14.0.

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: Sheppy, lmorchard, teoli, FredB
    Dernière mise à jour par : Sheppy,