Vos résultats de recherche

    transform-origin

    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.

    La propriété transform-origin permet de modifier l'origine du repère pour les opérations de transformation d'un élément. Par exemple, l'origine par défaut pour la fonction rotate() est le centre de la rotation. Cette propriété est utilisée en :

    1. Translatant l'élément avec l'opposé de la valeur fournie
    2. Appliquant la transformation souhaitée sur l'élément
    3. Translatant l'élément avec la valeur fournie pour cette propriété.

    Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.

    Valeur initiale50% 50% 0
    Applicabilitééléments transformables
    Héritéenon
    Pourcentagesse rapporte à la taille de la boîte de l'élément
    Médiavisuel
    Valeur calculéepour une valeur de type length sa valeur absolue, sinon un pourcentage
    Animableoui, comme une simple liste de , une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
    Ordre canoniqueUne ou deux valeurs, avec la longueur en absolue et les mots-clés traduits en pourcentage

    Syntaxe

    /* Utilisation d'une seule valeur */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset y-offset */
transform-origin: 3cm 2px;

/* y-offset x-offset-keyword */
transform-origin: 2px left;

/* x-offset-keyword y-offset */
transform-origin: left 2px;

/* x-offset-keyword y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword x-offset-keyword */
transform-origin: top right;

/* x-offset y-offset z-offset */
transform-origin: 2px 30% 10px;

/* y-offset x-offset-keyword z-offset */
transform-origin: 2px left 10px;

/* x-offset-keyword y-offset z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword y-offset-keyword z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword x-offset-keyword z-offset */
transform-origin: bottom right 2cm;

/* Valeurs globales */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

    Valeur

    x-offset
    Une valeur du type <length> ou <percentage> qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.
    offset-keyword
    Un mot-clé parmi left, right, top, bottom ou center qui décrit le décalage correspondant.
    y-offset
    Une valeur du type <length> ou <percentage> qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.
    x-offset-keyword
    Un mot-clé parmi left, right ou center qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.
    y-offset-keyword
    Un mot-clé parmi top, bottom ou center qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.
    z-offset
    Une valeur du type <length> (et jamais une valeur du type <percentage>, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..

    Les mots-clés sont des raccourcis qui correspondent aux valeurs <percentage> suivantes :

    Mot-clé Valeur
    left 0%
    center 50%
    right 100%
    top 0%
    bottom 100%

    Syntaxe formelle

    [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?

    Exemples

    Voir la page sur l'utilisation des transformations CSS pour des exemples supplémentaires.

    Exemples live

    Code Exemple

    transform: none;

    transform: rotate(30deg);

    transform: rotate(30deg);
    transform-origin: 0 0;

    transform: rotate(30deg);
    transform-origin: 100% 100%;

    transform: rotate(30deg);
    transform-origin: -10em -30em;

    transform: scale(1.9);

    transform: scale(1.9);
    transform-origin: 0 0;

    transform: scale(1.9);
    transform-origin: 100% -30%;

    transform: skewX(50deg);
    transform-origin: 100% -30%;

    transform: skewY(50deg);
    transform-origin: 100% -30%;

    Spécifications

    Spécification Statut Commentaires
    CSS Transforms Level 1
    La définition de 'transform-origin' dans cette spécification.    		 Version de travail Définition initiale.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple (Oui) -webkit 3.5 (1.9.1)-moz
    16.0 (16.0)[5]    		 9.0-ms
    10.0    		 10.5-o
    12.10    		 3.1-webkit
    Syntaxe tri-valuée (Oui) -webkit 10 (10)-moz
    16.0 (16.0)    		 5.5 (partial) [1]
    9.0 -ms
    10.0    		 Pas de support (Oui) -webkit
    Support avec SVG (Oui) 41 (41)[3]
    43 (43)[4]    		 Pas de support (Oui) ?
    Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple ? ? ? 8.1 -webkit [2] ? ?
    Syntaxe tri-valuée ? ? ? ? Pas de support ?
    Support avec SVG ? 41 (41) [3]
    43 (43) [4]    		 ? ? ? ?

    [1] Internet Explorer 5.5 et les versions supérieures supportent un filtre matricielle, propriétaire, qui peut être utilisé pour obtenir des effets similaires.

    [2] Voir la documentation MSDN pour transform-origin.

    [3] La gestion des pourcentages pour les éléments SVG était activée avec la préférence svg.transform-origin.enabled (par défaut avec false). Les mots-clés et les pourcentages font référence au canevas plutôt qu'à l'objet courant. Voir bug 1209061.

    [4] Les mots-clés et les pourcentages font référence au canevas plutôt qu'à l'objet courant. Voir bug 1209061.

    [5] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

    Voir aussi

    Étiquettes et contributeurs liés au document

    Étiquettes : 
     Contributeurs à cette page : SphinxKnight, Prinz_Rana, Sebastianz, antograssiot, teoli, FredB
     Dernière mise à jour par : SphinxKnight,