Exporter (0) Imprimer
Développer tout

Transformations

Internet Explorer 10, ainsi que les applications du Windows Store en JavaScript pour Windows 8, introduisent la prise en charge des transformations 3D CSS3 (Cascading Style Sheets, niveau 3). Windows Internet Explorer 9 prend en charge les transformations 2D CSS3, tout comme les applications du Windows Store en JavaScript. Les transformations permettent la conversion, la rotation et la mise à l’échelle des éléments dans des espaces 2D et 3D, sans devoir utiliser de plug-in. Les transformations CSS3 3D sont définies par World Wide Web Consortium (W3C) dans la spécification CSS Transforms, actuellement à l’état de brouillon.

Remarque  Nous vous conseillons de vous familiariser avec les systèmes de coordonnées de transformation et le rendu avant d’essayer de spécifier les transformations 3D manuellement.

Remarque  Pour fonctionner avec Internet Explorer 10 et les applications du Windows Store en JavaScript, les propriétés décrites dans cette rubrique nécessitaient auparavant le préfixe Microsoft "-ms-". Ce préfixe n’est plus nécessaire, mais il est tout de même reconnu. Afin de garantir la compatibilité à l’avenir, les applications qui utilisent le préfixe Microsoft avec les propriétés de transformation doivent être mises à jour en conséquence.

Propriété de transformation

Vous appliquez les transformations 2D et 3D à un élément en utilisant la propriété transform, qui contient une liste des fonctions de transformation. La syntaxe de la propriété est la suivante :

PropriétéDescription

transform

Indique les fonctions de transformation (répertoriées dans la section suivante) à appliquer à l’élément spécifié. La propriété transform peut avoir la valeur d’une liste de fonctions de transformation délimitées par des espaces ou du mot clé none, qui indique qu’aucune fonction de transformation n’est appliquée.

 

Fonctions de transformation prises en charge

Les fonctions de transformation prises en charge dans Internet Explorer 10 et les applications du Windows Store en JavaScript pour Windows 8 sont répertoriées ci-après. Chaque fonction est suivie d’un court exemple de balisage et d’une image montrant l’effet de l’exemple. (Pour afficher les fonctions de transformation 2D prises en charge, voir Fonctions de transformation.)

N’oubliez pas que l’ordre est important ! Les fonctions de transformation sont appliquées dans l’ordre dans lequel elles sont répertoriées dans la propriété transform.

En outre, les effets des fonctions avec un composant d’axe z sont plus évidents lorsque ces fonctions sont utilisées en association avec la fonction perspective, qui donne de la profondeur aux effets. Dans les exemples de balisage et les images qui suivent, la fonction perspective ainsi que d’autres fonctions ont été ajoutées à la propriété transform afin de rendre l’effet de la fonction illustrée plus évident. Pour voir l’effet de différentes combinaisons de fonctions et de valeurs, nous vous encourageons à visionner la démonstration de transformations 3D sur le site IE Test Drive.

Perspective

perspective(<length>)

La fonction perspective change la perspective dans laquelle un élément est visualisé, produisant ainsi une illusion de profondeur. À mesure que la valeur fournie à la fonction perspective augmente, l’élément apparaît de plus en plus éloigné de la visionneuse. La valeur doit être supérieure à 0 et est donnée en pixels.

Les unités de <length> sont les mêmes que celles fournies aux fonctions de traduction—, 1px dans la direction z indique la même distance que 1px dans les directions x et y.

Matrice 3D

matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)

La fonction matrix3d spécifie une transformation 3D en tant que matrice homogène 4×4 de seize valeurs dans l’ordre vecteur-matrice (« column-major »). Toutes les autres fonctions de transformation sont basées sur la fonction matrix3d.

Exemple :


div {
  transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué la fonction de transformation suivante : transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);

Translation 3D

translate3d(<translation-value>, <translation-value>, <translation-value>)

La fonction translate3D indique une translation 3D par le vecteur [tx,ty,tz], où tx, ty et tz sont respectivement les premier, deuxième et troisième paramètres de valeur de translation.

Exemple :


div {
  transform: translate3d(20px, -60px, 50px); 
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué la fonction de transformation suivante : transform: translate3d(20px, -60px, 50px);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Translation dans la direction Z

translateZ(<translation-value>)

La fonction translateZ indique une translation selon une valeur donnée dans la direction z. Les valeurs en pourcentage ne sont pas autorisées.

Exemple :


div {    
  transform: perspective(500px) translateZ(-60px);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué les fonctions de transformation suivantes : transform: perspective(500px) translateZ(-60px);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Mise à l’échelle 3D

scale3d(<number>, <number>, <number>)

La fonction scale3d indique une opération de mise à l’échelle 3D par le vecteur de mise à l’échelle [sx,sy,sz] décrit par les trois paramètres.

Exemple :


div {
  transform: scale3d(0.5, -0.5, 1.5);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué la fonction de transformation suivante : transform: scale3d(0.5, -0.5, 1.5);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Mise à l’échelle avec le vecteur Z

scaleZ(<number>)

La fonction scaleZ indique une opération de mise à l’échelle avec le vecteur de mise à l’échelle [1,1,sz], sz étant le paramètre donné. L’effet de la fonction scaleZ est plus évident lorsque cette fonction est utilisée en association avec des fonctions telles que rotate et perspective, comme le montre l’exemple suivant.

Exemple :


div {
  transform: perspective(500px) scaleZ(2) rotateX(45deg);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué les fonctions de transformation suivantes : transform: perspective(500px) scaleZ(2) rotateX(45deg);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Rotation 3D

rotate3d(<number>, <number>, <number>, <angle>)

La fonction rotate3d indique une rotation 3D dans le sens des aiguilles d’une montre. L’élément pivote selon l’angle indiqué dans le dernier paramètre, et selon le vecteur de direction [x,y,z] décrit par les trois premiers paramètres. Si le vecteur de direction n’est pas une longueur d’unité, il est normalisé. Un vecteur de direction qui ne peut pas être normalisé, tel que [0, 0, 0], ne produit aucune rotation.

Exemple :


div {
   transform: rotate3d(0.7, 0.5, 0.7, 45deg);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué la fonction de transformation suivante : transform: rotate3d(0.7, 0.5, 0.7, 45deg);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Rotation dans la direction X

rotateX(<angle>)

La fonction rotateX indique une rotation dans le sens des aiguilles d’une montre selon l’angle donné par rapport à l’axe x.

Exemple :


div {
  transform: perspective(500px) rotateX(45deg);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué les fonctions de transformation suivantes : transform: perspective(500px) rotateX(45deg);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Rotation dans la direction Y

rotateY(<angle>)

La fonction rotateY indique une rotation dans le sens des aiguilles d’une montre selon l’angle donné par rapport à l’axe y.

Exemple :


div {
  transform: perspective(500px) rotateY(45deg);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué les fonctions de transformation suivantes : transform: perspective(500px) rotateX(70deg);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Rotation dans la direction Z

rotateZ(<angle>)

La fonction rotateZ indique une rotation dans le sens des aiguilles d’une montre selon l’angle donné par rapport à l’axe z.

Exemple :


div {
  transform: rotateZ(65deg);
}

Résultat :

Élément Div bleu carré avec texte blanc, après lui avoir appliqué les fonctions de transformation suivantes : transform: rotateX(65deg);

(Le carré bleu clair indique la position d’origine de l’élément transformé.)

Propriété transform-origin

La propriété transform-origin établit l’origine de la transformation d’un élément.

Par exemple, si vous spécifiez la fonction rotate3d dans la propriété transform, cette propriété définira le point autour duquel l’élément effectuera une rotation. La valeur par défaut de cette propriété est "50% 50% 0px" (le milieu de l’élément).

PropriétéDescription

transform-origin

Indique l’origine de la transformation de l’élément spécifié. Cette propriété est définie avec une à trois valeurs :

  • La première valeur de longueur indique la position sur l’axe x par rapport au cadre contenant l’élément. Il peut s’agir d’une valeur de longueur (dans une unité de longueur prise en charge), d’un pourcentage ou de l’un des trois mots clés suivants : left (indiquant 0% de la longueur le long de l’axe x du cadre contenant l’élément), center (indiquant le point intermédiaire) ou right (indiquant 100% de la longueur).
  • La deuxième valeur de longueur indique la position sur l’axe y par rapport au cadre contenant l’élément. Il peut s’agir d’une valeur de longueur, d’un pourcentage ou de l’un des trois mots clés suivants : top (indiquant 0% de la longueur le long de l’axe y du cadre contenant l’élément), center (indiquant le point intermédiaire) ou bottom (indiquant 100% de la longueur).
  • La troisième valeur de longueur indique la position sur l’axe z par rapport au cadre contenant l’élément. Il doit s’agir d’une valeur de longueur.

 

Propriété transform-style

La propriété transform-style définit le rendu des éléments imbriqués dans l’espace 3D.

PropriétéDescription

transform-style

Définit comment les éléments imbriqués sont rendus dans l’espace 3D. Si vous avez défini cette propriété sur flat (plat) pour un élément, tous ses éléments enfants apparaissent comme aplatis dans le plan 2D de l’élément. Lorsque l’élément pivote autour de l’axe x ou y, les enfants se trouvant à des positions positives ou négatives sur l’axe z apparaissent sur le plan de l’élément, au lieu d’être placés devant ou derrière lui.

 

Remarque  La spécification W3C définit la valeur de mot clé preserve-3d pour cette propriété, ce qui indique que l’aplanissement n’est pas effectué. Internet Explorer 10 ne prend actuellement pas en charge le mot clé preserve-3d. Vous pouvez y remédier en appliquant la transformation de l’élément parent à chacun de ses éléments enfants en plus de la transformation normale qui leur est appliquée.

Propriété perspective

La propriété perspective applique la même transformation que la fonction de transformation perspective, hormis qu’elle s’applique uniquement aux enfants positionnés ou transformés de l’élément, et non à la transformation de l’élément lui-même.

PropriétéDescription

perspective

Applique la même transformation que la fonction de transformation perspective aux enfants positionnés ou transformés de l’élément auquel la propriété s’applique. Cette propriété peut avoir pour valeur un nombre, qui établit un contexte d’empilement et un bloc conteneur ou le mot clé none, qui indique qu’aucune transformation de perspective n’est appliquée.

 

Propriété perspective-origin

La propriété perspective-origin établit l’origine de la propriété perspective.

PropriétéDescription

perspective-origin

Établit l’origine de la propriété perspective. Elle définit en fait la position x et y à partir de laquelle la visionneuse regarde les enfants de l’élément. Cette propriété est définie avec une ou deux valeurs :

  • La première valeur de longueur indique la position sur l’axe x par rapport au cadre contenant l’élément. Il peut s’agir d’une valeur de longueur (dans une unité de longueur prise en charge), d’un pourcentage ou de l’un des trois mots clés suivants : left (indiquant 0% de la longueur le long de l’axe x du cadre contenant l’élément), center (indiquant le point intermédiaire) ou right (indiquant 100% de la longueur).
  • La deuxième valeur de longueur indique la position sur l’axe y par rapport au cadre contenant l’élément. Il peut s’agir d’une valeur de longueur, d’un pourcentage ou de l’un des trois mots clés suivants : top (indiquant 0% de la longueur le long de l’axe y du cadre contenant l’élément), center (indiquant le point intermédiaire) ou bottom (indiquant 100% de la longueur).

 

Propriété backface-visibility

La propriété backface-visibility indique si la « face arrière » d’un élément transformé est visible quand elle fait face à la visionneuse. Avec un élément non transformé, la face avant de l’élément fait face à la visionneuse.

PropriétéDescription

backface-visibility

Détermine si la face arrière d’un élément transformé est visible. Cette propriété est définie avec une ou deux valeurs :

visible

Indique que la face arrière est visible.

hidden

Indique que la face arrière n’est pas visible.

 

Informations de référence sur les API

Transforms

Exemples et didacticiels

Comment donner vie à votre page Web à l’aide d’animations, de transitions et de transformations CSS

Démonstrations du site Internet Explorer Test Drive

Bringing pages alive with CSS Transforms & Animations
Hands On: 3D Transforms
Hands On: 2D Transforms
Flickr Postcards

Billets IEBlog

Animations pleine page avec CSS
Transformations 3D CSS3 dans IE10

Spécification

Transformations CSS

Rubriques connexes

Présentation des transformations 2D CSS3

 

 

Afficher:
© 2014 Microsoft