Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction translate3d()

Description de la fonction translate3d().

La fonction translate3d() applique une translation, c'est à dire un déplacement linéaire, à un élément.
translate3d() permet une translation en 3D, suivant un ou plusieurs des axes X, Y et Z. C'est donc un raccourci qui peut remplacer les trois fonctions translateX(), translateY() et translateZ().

Les 3 axes pour la fonction translate3d()

La fonction translate3d() peut être utilisée avec :

  • transform : Applique une transformation géométrique.

Syntaxe de la fonction translate3d().

  • transform: translate3d(5px, 10px, 5px); x y z

    x, y et z définissent la distance de déplacement respectivement suivant les axes X, Y et Z.

    Ce sont trois valeurs numériques positives ou négatives suivies de leur unité (voir les unités de dimensions en CSS).

    x et y peuvent également être indiquées en pourcentages, ceux-ci sont alors calculés par rapport à la largeur et à la hauteur de l'élément. z doit être indiqué dans une unité absolue (px, cm, etc).

    Les trois valeurs doivent obligatoirement être indiquées.

Simulateur.

Remarque : les translations suivant l'axe Z ne provoquent pas de changement visible sur l'écran, à moins que la propriété perspective ait été positionnée à une valeur différente de none.

Appliquer un effet de perspective.

transform:
( x y z )
Résultat

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs traitent correctement toutes les transformations en 2D.

Afficher les versions antérieures   Afficher la version à venir