Fonctions de transformation 3D en CSS –

Dans cet article, je montrerai comment ajouter une autre dimension à vos pages Web et applications avec les nouvelles fonctions et propriétés de transformation 3D dans CSS. Nous examinerons la transformation, la traduction, les rotations, la mise à l'échelle, la perspective, etc., ainsi que les problèmes liés à l'index z, aux pièges du navigateur et aux meilleurs cas d'utilisation de ces fonctions.

:

• l'axe des abscisses
• l'axe des ordonnées et
• l'axe des profondeurs

Sur un écran à deux dimensions, il est utile de penser que la surface est en coordonnée z zéro. Une valeur z positive déplace un objet vers vous (devant l'écran) tandis qu'une valeur z négative déplace un objet (derrière l'écran). Lorsque la perspective est ajoutée, une valeur z plus éloignée peut faire disparaître complètement l'objet. Les éléments eux-mêmes restent plats et ont une profondeur nulle. Il est possible de faire une mise à l'échelle dans le plan z, mais cela ne pas extrude un carré dans un cube. Vous pouvez toujours créer un cube, mais vous aurez besoin de six éléments pour chaque côté.

Les transformations 3D sont bien supportées dans tous les navigateurs modernes (IE10 +), mais:

• Internet Explorer ne t support transform-style: preserve-3d ce qui rend impossible la création d'une scène 3D.
• Toutes les versions de Safari doivent utiliser le préfixe -webkit-backface-visibility pour masquer les faces arrière. Tous les autres navigateurs prennent en charge backface-visibility .

Les sections suivantes décrivent les propriétés et les fonctions de la transformation 3D. La page de démonstration illustre comment la plupart sont utilisés.

Propriété transform

N'importe quel élément peut avoir une seule propriété de transformation appliquée. On peut lui attribuer une fonction avec un ou plusieurs paramètres. Par exemple:

 .element {
  transform: function1 (paramètre1, [...parameterN]);
}

Si plusieurs transformations sont nécessaires, vous pouvez définir n'importe quel nombre de fonctions séparées par des espaces:

 .element {
  transform: function1 (p1, [...pN]) function2 (p1, [...pN]);
}

Par exemple, mettre à l'échelle dans le plan horizontal et transformer verticalement:

 .element {
  transformer: scaleX (2) translateY (50px);
}

Finalement, transform: none; supprime toutes les transformations existantes.

Fonctions de traduction (en mouvement)

Vous avez peut-être utilisé les fonctions translate pour déplacer un élément horizontalement le long de axe x ou verticalement le long de l'axe y:

 transform: translateX (50px); / * 50px à droite * /
transformer: translateY (-100%); / * 100% jusqu'à * /
transformer: traduire (50px, -100%); /* les deux ensemble */

Toute unité de longueur peut être utilisée. Les pourcentages font référence à la taille de l'élément transformé et un bloc de 100px avec translateY (80%) le déplace de 80 pixels vers le bas.

En passant à la troisième dimension, nous pouvons également utiliser translateZ :

 transform: translateZ (-200px); / * 200px 'dans' l'écran * /

Trois éléments, # box1 # box2 et # box3 positionnés absolument au même endroit, avec translateZ (-200px) appliqué à # box2 et translateZ (-400px) appliqué à # box3. Le résultat est assez peu inspirant:

Cependant, si on fait pivoter tout le conteneur externe #scene les transformations de l'axe z deviennent plus évidentes: 19659018] #scene {
  Transformer le style: préserver-3d;
  transformer: rotateX (-10deg) rotateY (-10deg);
}

La ​​fonction abrégée translate3d permet de déplacer un élément le long des trois axes en conséquence:

 transform: translate3d (50px, 100%, 7em) ; / * x, y, z axe * /

propriété de transformation Propriété

Par défaut (et toujours dans IE), le style de transformation est défini sur flat . Cela indique que tous les enfants transformés d'un élément se trouvent dans le plan de l'élément lui-même. En d'autres termes, les éléments internes pourraient avoir n'importe quelle transformation appliquée mais ils seraient écrasés dans le plan plat du conteneur:

Dans la plupart des cas, -3d; doit être utilisé pour indiquer que les éléments enfants sont positionnés dans un espace 3D et que toute transformation du conteneur se transformera en conséquence.

Fonctions de rotation

La ​​fonction 2D rotate () fait pivoter les éléments autour de l'axe des z et est identique à rotateZ () . Par exemple:

 transform: rotateZ (45deg); / * ou faire pivoter (45deg) * /

rotateX () tourne autour de l'axe horizontal et rotateY () autour de la verticale.

défini dans:

• tour – par exemple 0.5tour est un demi-tour dans le sens des aiguilles d'une montre
• deg – degrés, par ex. 90deg est un quart de tour dans le sens des aiguilles d'une montre
• rad – radians, par ex. -3,1416rad représente un demi-tour dans le sens contraire des aiguilles d'une montre
• grad – des gradés. Un tour complet est 400grad -200grad est d'un demi-tour dans le sens contraire des aiguilles d'une montre.

Trois axes de rotation peuvent être définis avec rotate3d () fonction. Un peu confus, il accepte quatre valeurs, qui décrivent un vecteur:

• x – la coordonnée x du vecteur dénotant l'axe de rotation (0 à 1).
• y – la coordonnée y du vecteur désignant l'axe de rotation (0 à 1).
• z – la coordonnée z du vecteur désignant l'axe de rotation (0 à 1).
• a – l'angle de rotation. Un angle positif indique une rotation dans le sens des aiguilles d'une montre et le négatif est dans le sens inverse des aiguilles d'une montre.

Les masochistes mathématiques peuvent lire tous les détails de rotate3d () à MDN . 19659017] Les fonctions scaleX () et scaleY () étirent ou réduisent un élément dans les plans horizontal et vertical en conséquence:

 transform: scaleX (2); / * deux fois plus large * /
transformer: scaleY (0.5); / * moitié moins grand * /

scaleZ () fait de même pour le plan de profondeur. Dans l'exemple ci-dessus, transform: scaleZ (0,5); réduit donc de moitié l'espacement entre chaque élément.

La ​​fonction scale3d (x, y, z) peut appliquer une mise à l'échelle dans tous les plans en une seule commande. Par exemple:

 #scene {
  Transformer le style: préserver-3d;
  transformer: scale3d (2, 1, 0.5) rotateX (-10deg) rotateY (-10deg);
}

Origine de la transformation

Par défaut, un élément est pivoté et mis à l'échelle autour de son centre. Cela peut être modifié en définissant transform-origin avec jusqu'à trois valeurs séparées par des espaces:

• syntaxe à une valeur: une longueur ou un pourcentage de l'origine x. Un seul gauche centre droit haut ou bas peut aussi être utilisé top et bottom définissent l'origine y avec une origine centre x.
• syntaxe à deux valeurs: les origines x et y. Une longueur, un pourcentage ou un mot-clé peut être utilisé.
• syntaxe à trois valeurs: les origines x, y et z. La valeur z ne peut être qu'une unité de longueur telle que px ou em .

Le déplacement d'une origine affecte le plan de rotation des autres. Par exemple, origine de transformation: centre gauche 0; déplace l'origine vers le centre du bord gauche. Ceci affectera les fonctions rotateY () et rotateZ () .

Backface Visibility

L'arrière d'un élément est montré lorsqu'il tourne autour de l'axe x ou y de plus de 90 degrés mais moins de 270 degrés dans les deux sens. L'arrière est effectivement une image miroir et il est visible par défaut.

L'arrière peut être caché en plaçant visibilité arrière: caché; – s'il est appliqué à # box2 :

 # box2 {
  visibilité sur la face arrière: caché;
}

#scène {
  transformer: rotateX (-10deg) rotateY (-135deg);
}

backface-visibility: hidden; est souvent utilisé pour les animations de retournement de carte où deux éléments montrent le recto et le verso d'une carte. visible à la fois.

Perspective

Les exemples ci-dessus n'appliquent pas la perspective. Un élément déplacé plus profondément dans le plan z reste de la même taille, quel que soit son éloignement du spectateur. La valeur par défaut de la perspective est none mais elle peut être définie sur toute longueur positive. Par exemple:

 #scene {
  perspective: 1000px;
  transformer: rotateX (-15deg) rotateY (-15deg);
}

Plus la longueur de la perspective est faible, plus le point de fuite est proche et plus l'effet 3D est prononcé:

 #scene {
  perspective: 200px;
  transformer: rotateX (-15deg) rotateY (-45deg);
}

Point de fuite de la perspective

Par défaut, le point de fuite de la perspective se trouve au centre de l'élément en cours de transformation. Il peut être modifié en définissant perspective-origin: xy; où:

• x est un mot-clé ( à gauche centre ou droit ) ou un pourcentage par rapport à la largeur de l'élément ( 0% 50% et 100% équivalent à les mots-clés).
• y est un mot-clé ( haut centre ou bas ) ou un pourcentage par rapport à la hauteur de l'élément ( 0% 50% et 100% équivalent aux mots-clés).

Point de fuite en haut à gauche:

 # scène {
  perspective-origine: haut gauche; / * ou 0% 0% * /
  perspective: 1000px;
}

Point de fuite en bas à droite:

 #scene {
  origine de la perspective: en bas à droite; / * ou 100% 100% * /
  perspective: 1000px;
}

Il existe également une fonction perspective () – par exemple, transform: perspective (200px) . Cependant, cela ne semble pas respecter origine de perspective .

All Together Now

Enfin, la mise à l'échelle, la rotation et la traduction peuvent être définies dans une matrix3d ​​() fonction qui nécessite pas moins de 16 valeurs pour une transformation affine tridimensionnelle .

Ceci est probablement mieux utilisé en JavaScript et tenté par ceux qui ont un diplôme en géométrie! Pour les CSS, une liste des fonctions de transformation est susceptible d'être plus lisible et maintenable. La page de démonstration fournit un outil interactif qui vous aidera à comprendre comment les propriétés et les fonctions fonctionnent ensemble.

Vous pouvez trouver des exemples étonnants de transformations CSS 3D, y compris Fusils à la première personne galeries d'images et Texte déroulant de Star Wars . Beaucoup sont des démonstrations de preuve de concept qui ne seront probablement pas utilisées dans des projets types. Cependant, quelques effets 3D subtils et progressivement améliorés peuvent ajouter une autre dimension à vos pages Web et à vos applications.

Craig est un consultant web britannique indépendant qui a construit sa première page pour IE2.0 en 1995. Depuis, il préconise normes, accessibilité et meilleures pratiques techniques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler