Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    perspective-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.

    Résumé

    La propriété CSS perspective-origin détermine la position que l'observateur regarde. Cette position est utilisée come point de fuite par la propriété perspective.

    • Valeur initiale 50% 50%
    • 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 pour une valeur de type <longueur> sa valeur absolue, sinon un pourcentage
    • Animable oui, 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 canonique One or two values, with length made absolute and keywords translated to percentages

    Syntaxe

    Syntaxe formelle : [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
    
    perspective-origin: x-position            /* syntaxe à une valeur */
    perspective-origin: x-position y-position /* syntaxe à deux valeurs */
    
    Lorsque x-position et y-position sont tous les deux des mots-clés, la déclaration suivante est aussi valide :
    perspective-origin: y-position x-position
    

    Valeurs

    x-position
    Indique la position de l'abscisse du point de fuite. Elle peut être une des valeurs suivantes :
    • <percentage> indique que la position est relative à la largeur de l'élément. Cette valeur peut être négative.
    • <longueur> indique que la position utilise une valeur de longueur. Cette valeur peut être négatuve.
    • left, un mot-clé équivalent à la valeur de longueur 0.
    • center, un mot-clé équivalent au pourcentage 50%.
    • right, un mot-clé équivalent au pourcentage 100%.
    y-position
    Indique la position de l'ordonnée du point de fuite. Elle peut prendre les valeurs suivantes :
    • <percentage> indique que la position est relative à la hauteur de l'élément. Cette valeur peut être négative.
    • <longueur> indique que la position utilise une valeur de longueur. Cette valeur peut être négative.
    • top, un mot-clé équivalent à la valeur de longueur 0.
    • center, un mot-clé équivalent au pourcentage 50%.
    • bottom, un mot-clé équivalent au pourcentage 100%.

    Exemples

    perspective-origin:top left; perspective-origin:top; perspective-origin:top right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin:left; perspective-origin:50% 50%; perspective-origin:right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin:bottom left; perspective-origin:bottom; perspective-origin:bottom right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6

    Spécifications

    Spécification Statut Commentaire
    CSS Transforms Level 1 Working Draft  

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 12-webkit 10 (10)-moz
    16 (16)
    10 Pas de support (Oui)-webkit
    Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base 3.0-webkit 10.0 (10)-moz
    16.0 (16)
    ? Pas de support (Oui)-webkit

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale