Introduction
Depuis longtemps, la 3D est l'apanage des applications de bureau. Récemment, avec le lancement des smartphones avancés qui bénéficient de l'accélération native du GPU, nous avons constaté que la 3D est utilisée presque partout.
Généralement, la 3D est principalement utilisée comme appareil pour les jeux vidéo ou certaines interfaces utilisateur avancées. Ce n'est qu'avec l'introduction des transformations Perspective dans WPF et Silverlight qu'un modèle adapté à l'application d'effets 3D aux éléments de l'interface utilisateur est devenu une solution pratique pour les développeurs d'applications (après tout, la 3D n'est pas vraiment facile).
Le modèle de transformation 3D CSS a été lancé en tant que brouillon de spécification en mars 2009 pour permettre aux développeurs Web de créer des interfaces utilisateur intéressantes et attrayantes qui exploitent la 3D, en permettant aux auteurs d'applications d'appliquer des transformations de perspective 3D à n'importe quel élément DOM visuel.
Le brouillon de transformation CSS 3D est une extension logique du modèle de transformation CSS 2D et introduit des propriétés supplémentaires, telles que les perspectives, les rotations et les transformations dans un espace 3D.
Jamais nous n'avions pu créer des interfaces 3D aussi facilement. Ces technologies ont réduit les obstacles à l'accès. Vous n'avez plus besoin d'être un génie des mathématiques pour créer des éléments 3D.
Notez que le module CSS 3D est conçu pour aider les développeurs à créer des applications riches et visuellement intéressantes. Il n'est pas conçu pour vous permettre de créer des mondes 3D immersifs.
Prise en charge des navigateurs et accélération matérielle
point de vue -webkit-perspective
-webkit-transform-3d
Il est important de garder à l'esprit que, même si un navigateur est compatible avec la 3D, il se peut qu'il ne soit pas en mesure d'effectuer un rendu 3D en raison de limitations liées au matériel et aux pilotes. Les scènes 3D basées sur le DOM peuvent être très gourmandes en ressources de calcul. C'est pourquoi les fournisseurs de navigateurs ont décidé de ne pas ralentir les navigateurs avec une solution de rendu logicielle pure, mais exploiter le GPU, qui n'est peut-être pas disponible sur toutes les plates-formes.
Détection de caractéristiques
Qu'en est-il de la détection des fonctionnalités ? J'espérais que vous n'alliez pas me poser la question ! Les développeurs ont utilisé des outils tels que Modernizr pour détecter la prise en charge de certaines fonctionnalités du navigateur. Bien qu'il soit possible de détecter la prise en charge des transformations 3D, il est impossible de détecter la présence de l'accélération matérielle, et l'accélération matérielle est l'ingrédient clé.
Exemple de base
Quoi de mieux que de se lancer directement ? Dans cet exemple, nous allons appliquer un ensemble de rotations de base d'un élément DOM arbitraire.
Nous commençons par définir une perspective sur l'élément racine.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
La perspective est importante, car elle définit la profondeur de rendu de la scène 3D. Les valeurs comprises entre 1 et 1 000 produisent un effet très prononcé, et les valeurs inférieures à 1 000. Nous ajoutons ensuite un iFrame et appliquons une rotation de 30 degrés autour des axes Z et Y.
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BAM! En d'autres termes, l'élément est entièrement interactif, et à tous égards, il s'agit d'un élément DOM à part entière (sauf qu'il est encore plus cool). Si votre navigateur n'est pas compatible avec les transformations 3D, rien ne se passe. Vous verrez un iFrame simple sans rotation appliquée. Si votre navigateur prend en charge les transformations 3D, mais sans accélération matérielle, cela peut sembler un peu étrange.
Animation
Ce que j'aime dans les transformations 3D CSS3, c'est qu'elles s'intègrent parfaitement au module CSS Transition. Les animations et les transitions sont faciles à définir en CSS, et les appliquer à la 3D ne fait pas exception.
Vous pouvez facilement animer des éléments auxquels une perspective 3D est appliquée. Il vous suffit de définir le style de "transition" sur "Transformer", puis d'associer une durée et une fonction d'animation. À partir de là, toute modification apportée au style "transformer" sera animée.
Nous avons refactorisé les exemples précédents pour utiliser des styles de document plutôt que des styles intégrés. Non seulement cela efface l'exemple, mais cela permet également à l'échantillon de tirer parti du pseudo-sélecteur :hover. Avec le sélecteur :hover, les transitions peuvent être lancées en passant simplement la souris sur l'élément. Parfait !
Résumé
Nous n'avons abordé qu'un bref aperçu des effets intéressants pouvant être appliqués à n'importe quel élément DOM visible à l'aide des transformations CSS 3D. Il reste encore beaucoup d'actions à effectuer qui n'ont pas été abordées dans ce tutoriel.