Transformations 3D CSS dans IE10
Les fonctionnalités du langage CSS3 facilitent la création d'expériences Web enrichies et immersives. Dans un récent billet, nous avons expliqué comment les développeurs Web peuvent renforcer la personnalité de leurs sites grâce aux transitions et aux animations CSS3. Avec les transformations 3D CSS3, les développeurs disposent véritablement d'une dimension supplémentaire leur permettant d'améliorer leurs sites. Par exemple, la page Démarrer du style Metro de Windows 8 fait appel à de subtiles transformations 3D pour mettre en évidence les vignettes sur lesquelles l'utilisateur appuie, comme le montre l'image ci-dessous.
Vignette Internet Explorer 10 en position normale (à gauche) et enfoncée (à droite)
Ajout d'une troisième dimension aux transformations CSS
À l'instar des transformations 2D CSS3, les transformations 3D fournissent des fonctions et des valeurs aux propriétés CSS transform et transform-origin, qui appliquent des opérations de transformation géométrique aux éléments HTML. Les transformations 3D CSS étendent les fonctions de transformation pour permettre la réalisation de transformations en 3D. Les fonctions de transformation rotate(), scale(), translate(), skew() et matrix() sont étendues de façon à englober l'espace 3D, par le biais d'un paramètre correspondant à la coordonnée Z (ou par le biais de 10 paramètres supplémentaires, dans le cas de la fonction matrix3d()), et à générer des fonctions de transformation supplémentaires, par exemple rotateZ() et scaleZ().
Une nouvelle fonction de transformation perspective ajoute une profondeur aux éléments transformés, en rendant les points distants plus petits.
Les transformations 3D CSS ajoutent également de nouvelles propriétés CSS. En plus des propriétés transform et transform-origin, IE10 prend en charge les propriétés perspective, perspective-origin, backface-visibility (avec préfixe propre à l'éditeur), ainsi que la valeur flat de la propriété transform-style.
Remarque : Les exemples de code figurant dans ce billet utilisent tous des propriétés sans préfixe, telles qu'elles ont été définies dans le standard W3C. Cependant, pour le moment, tous les navigateurs qui prennent en charge ces fonctionnalités utilisent des préfixes propres à l'éditeur. Lors de vos tests, n'oubliez pas d'ajouter le préfixe de votre navigateur à l'exemple de code.
Perspective
La fonction de transformation perspective joue un rôle important dans les transformations 3D. Elle définit la position du spectateur et associe le contenu visible à une pyramide de vision, qui est ensuite projetée sur un plan de vision 2D. Si cette perspective n'est pas spécifiée, tous les points de l'espace Z sont aplatis sur un même plan 2D et la transformation obtenue n'offre aucune perception de profondeur. Pour certaines transformations, par exemple une translation le long de l'axe Z (voir ci-dessous), la fonction de transformation perspective est indispensable pour que l'effet de la transformation soit visible.
Dans les exemples ci-dessous, est l'élément d'origine non transformé et est l'élément transformé.
transform: perspective(500px) translate(0px, 0px, -300px); | transform: translate(0px, 0px, -300px); | |
transform: perspective(500px) rotateY(30deg); | transform: rotateY(30deg); | |
Pour ajouter plus rapidement la transformation perspective à plusieurs éléments, vous pouvez utiliser la propriété perspective avec leurs éléments parents. La propriété perspective applique la transformation perspective à ses différents éléments enfants :
#parent {
perspective: 500px;
}
#div1 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg);
}
#div2 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg) translate(220px);
}
La propriété perspective-origin peut également être utilisée conjointement avec perspective pour décaler le point de vue par rapport au centre de l'élément :
Vous pouvez constater ci-dessous qu'en décalant vers la gauche l'origine de la perspective, le contenu situé à droite de l'origine initiale de la perspective paraît plus éloigné.
#parent {
perspective: 500px;
perspective-origin: -300px 0px;
}
backface-visibility
La propriété backface-visibility permet de masquer la face arrière du contenu. Par défaut, la face arrière est visible et le contenu transformé est visible, même s'il fait l'objet d'une rotation. En revanche, lorsque la valeur de la propriété backface-visibility est hidden, le contenu est masqué lorsque l'élément est pivoté de telle sorte que la face avant n'est plus visible. Cette propriété peut être utile pour simuler un objet à plusieurs faces, par exemple la carte utilisée dans l'exemple ci-dessous. En attribuant à la propriété backface-visibility la valeur hidden, vous pouvez très facilement faire en sorte que seules les faces avant soient visibles.
Code CSS :
.card, .card div {
position: absolute;
width: 102px;
height: 143px;
}
.card div:nth-child(1) {
background-image: url('redback.png');
}
.card div:nth-child(2) {
background-image: url('8clubs.png');
backface-visibility: hidden;
}
Code HTML pour une carte :
<div class="card"><div></div><div></div></div>
En créant six cartes comme ci-dessus et en attribuant à chacune d'entre elles une propriété style="transform: rotateY(ndeg)" dont la valeur de rotation n est différente, nous obtenons le résultat suivant :
| rotateY(0deg); | rotateY(36deg); | rotateY(72deg); | rotateY(108deg); | rotateY(144deg); | rotateY(180deg); |
Dans cet exemple, en l'absence de rotation, vous voyez le deuxième élément div, le 8 de trèfle, car cette carte se trouve sur le dessus. Si nous faisons pivoter la carte de 90°, la propriété backface-visibility: hidden; du deuxième élément div rend la carte invisible et le premier élément div, c'est-à-dire le dos de la carte, devient visible.
Transformations 3D associées à des animations et à des transitions
Cerise sur le gâteau, vous pouvez même utiliser des transformations 3D avec des transitions et des animations CSS. Si vous utilisez IE10 ou un autre navigateur prenant en charge les animations CSS3 de transformations 3D CSS3, essayez cet exemple de texte défilant, créé en animant la propriété transform.
Voici le code CSS permettant d'obtenir l'effet illustré sur les captures d'écran ci-dessous.
#parentDiv {
perspective: 500px;
perspective-origin: 150px 500px;
}
#div1 {
transform-origin: 150px 500px;
animation: scrollText 200s linear infinite;
}
@keyframes scrollText {
0% { transform: rotateX(45deg) translateY(500px); }
100% { transform: rotateX(45deg) translateY(-8300px); }
}
Testez par vous-même dès aujourd'hui !
Découvrez ces transformations 3D dans la version d'IE10 de Windows Developer Preview. La démonstration de test Hands On: 3D Transforms permet de mieux visualiser les possibilités offertes par les transformations 3D CSS.
Nous sommes impatients de découvrir vos créations !
—Jennifer Yu, chef de projet, Internet Explorer Graphics