translateZ() CSS fonction

Définition de la CSS translateZ().

La fonction de Translation CSS translateZ() de la propriété de Transformation CSS transform permet de déplacer sur l'axe Z d'un élément HTML par rapport à sa position d'origine dans le cadre d'un contexte 3D.

Exemple de syntaxe CSS translateZ() :

transform : translateZ(20px);
// identique à
transform : translate3d(0, 0, 20px);

La fonction de Translation CSS translateZ(Z) accepte comme argument de déplacement :

Z : nombre positif ou négatif représentant la translation de profondeur suivi d'une unité CSS de longueur, sauf %.
Si Z est égale à 0 c'est la position d'origine.

Le fait d'utiliser la CSS translateZ() quelque soit sa valeur, active l'accélération matérielle.

Exemple de code translateZ() CSS

Conditions d'application de la CSS translateZ().

La fonction de Translation CSS translateZ() est applicable avec la propriété de Transformation CSS transform et avec ses propriétés de Transformation préfixées (-moz-transform, -webkit-transform, -ms-transform).

La valeur de la CSS translateZ() peut être mise directement dans la fonction de raccourci CSS translate3d().

Problème d'interprétation de translateZ() en Css.

La propriété de Transformation CSS transform n'est reconnue par certains navigateurs.

Conditions d'animation de translateZ() en CSS3.

Mettez transition comme valeur de la propriété de Transformation CSS transition-property.

La CSS translateZ() est une fonction de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour translateZ().

Effets selon la valeur de la Css translateZ()

schéma d'explication de la profondeur Plus la valeur sera grande en positif, plus l'objet va se rapprocher. A l'inverse plus valeur sera grande en négatif, plus l'objet va s'éloigner.

Compatibilités navigateurs de la fonction translateZ()

Détails des versions de la CSS translateZ(): Fonction translateZ() est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS translateZ(): Fonction CSS translateZ() est compatible à partir de Chrome 1; Fonction CSS translateZ() est compatible à partir de Firefox 3.5; Fonction CSS translateZ() est compatible à partir de Internet Explorer 9; Fonction CSS translateZ() est compatible à partir de Opera 10.5; Fonction CSS translateZ() est compatible à partir de Safari 3.1

Exemples et astuces CSS pour utiliser translateZ()

Fad

Comment faire un déplacement Css sur l'axe de perspective Z?

Votre avis sur la définition translateZ() en CSS

Votez pour la définition CSS `translateZ()`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.

Définitions annexes à la Css translateZ()

Définitions CSS annexes translateZ()

-moz-transform: La propriété de Transformation CSS -MOZ-TRANSFORM permet de spécifier les transformations 2D et 3D à appliquer à un élément HTML.Exemple d'écriture CS...[ -moz-transform ]
-ms-transform: La propriété de Transformation CSS -MS-TRANSFORM permet de spécifier les transformations 2D à appliquer sur un élément HTML. Exemple d'écriture CSS de...[ -ms-transform ]
-webkit-transform: La propriété de Transformation CSS -WEBKIT-TRANSFORM permet de spécifier les transformations 2D ou 3D à appliquer à un élément HTML. Exemple d'écritur...[ -webkit-transform ]
transform: La propriété de Transformation CSS TRANSFORM permet de spécifier le type de transformation 2d ou 3d à appliquer sur un élément HTML.Exemple d'écriture...[ transform ]
translate3d(): La fonction de Translation CSS translate3d() de la propriété de Transformation CSS transform permet de spécifier les déplacements d'un élément HTML pa...[ translate3d() ]