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 rotate3d()

Description de la fonctionsrotate3d().

rotate3d() calcule une rotation dans le plan 3D. Cette rotation peut ensuite être appliquée à un élément par la propriété transform. L'axe et l'angle de rotation sont totalement ajustables.

L'espace 3D est définit par trois axes, X, Y et Z, suivant la disposition ci-dessous. Les axes X et Y sont dans le plan de l'écran, tandis que l'axe Z est dirigé vers les yeux du lecteur.

Les axes pour la fonction rotate3d()

rotate3d() peut remplacer les trois fonctions de rotation élémentaires rotateX(), rotateY() et rotateZ(), au prix d'une légère complication pour l'écriture des paramètres. Mais elle peut faire beaucoup mieux puisque, avec rotate3d(), l'axe de rotation n'est pas forcément un des axes X, Y ou Z.

rotate3d() peut être utilisée avec :

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

Syntaxe de la fonction rotate3d().

  • transform: rotate3d(1, 0, 0, 45deg); x y z a

    x, y et z sont trois valeurs sans unité. Elles définissent l'axe de rotation.
    Pour une rotation autour de l'axe X : rotate3d(1,0,0,a)
    Autour de l'axe Y : rotate3d(0,1,0,a)
    Et autour de l'axe Z : rotate3d(0,0,1,a)
    Mais toutes les combinaisons et valeurs intermédiaires sont possibles. Le schéma représente quelque chose comme rotate(1, 0.25, 0.4, a)

    Définition de l'axe de rotation pour rotate3d()

    a est une valeur numérique positive, négative ou nulle, suivie d'une unité d'angle (voir les unités angulaires en CSS). Cette valeur définit bien sûr l'angle de rotation.

Simulateur.

Remarque : le simulateur utilise également la fonction perspective() pour que la rotation soit plus facile à visualiser.

transform:
( x y z a )
Résultat

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs traitent correctement les transformations 3D.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Transformations géométriques - Propriétés.

  • backface-visibility : Visibilité de la face arrière de l'élément (pendant sa rotation).
  • perspective : Effet de perspective appliqué à un élément ayant subi une transformation 3D.
  • perspective-origin : Position de l'observateur dans le cas d'une déformation 3D avec perspective.
  • transform : Applique une transformation géométrique.
  • transform-origin : Point d'origine pour certaines transformations.
  • transform-style : Rendu des éléments soumis à une transformation 3D.

Transformations géométriques - Fonctions.

  • matrix() : Applique une transformation composite à un élément (translations, rotations...)
  • matrix3d() : Applique une série de transformations 3D à un élément.
  • perspective() : Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
  • rotate() : Définit une rotation de l'élément en 2D (dans le plan de l'écran).
  • rotateX() : Définit une rotation de l'élément autour de l'axe X (en 3D),
  • rotateY() : Définit une rotation 3D de l'élément autour de l'axe Y.
  • rotateZ() : Définit une rotation de l'élément autour de l'axe Z.
  • scale() : Définit un agrandissement ou une réduction de l'élément.