3D et CSS

Paul Kinlan

Introduction

Pendant longtemps, la 3D a été l'apanage des applications de bureau. Récemment, avec l'arrivée de smartphones avancés qui ont accès à l'accélération GPU native, la 3D a commencé à être utilisée presque partout.

En général, la 3D est principalement utilisée pour les jeux ou certaines interfaces utilisateur avancées. Ce n'est qu'avec l'introduction des transformations de perspective dans WPF et Silverlight qu'un modèle adapté à l'application d'effets 3D aux éléments d'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é présenté en tant que spécification provisoire 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.

La version préliminaire de la transformation 3D CSS est une extension logique du modèle de transformation 2D CSS. Elle introduit des propriétés supplémentaires, y compris des perspectives, des rotations et des transformations dans un espace 3D.

Jamais auparavant nous n'avons pu créer d'interfaces 3D aussi facilement. Ces technologies ont permis de réduire les obstacles à l'entrée. 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

-webkit-perspective

-webkit-transform-3d

N'oubliez pas que même si un navigateur est "compatible" avec la 3D, il est possible qu'il ne puisse pas l'afficher en raison de limitations matérielles et de pilotes. Les scènes 3D basées sur le DOM peuvent être très coûteuses en termes de calcul. Par conséquent, les fournisseurs de navigateurs ont décidé de ne pas ralentir les navigateurs avec une solution de rendu logiciel pure, mais de tirer parti du 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 de fonctionnalités ? J'espérais que vous ne me poseriez pas cette question. Les développeurs utilisent des outils tels que Modernizr pour détecter la prise en charge de fonctionnalités et de capacités spécifiques 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 d'accélération matérielle, qui est l'ingrédient clé.

Exemple de base

Le meilleur moyen de se lancer est de se lancer. Dans cet exemple, nous allons appliquer un ensemble de rotations de base à 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é, tandis que les valeurs supérieures à 1 000 le sont moins. Ensuite, nous ajoutons 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 ! Voilà, l'élément est entièrement interactif et il s'agit d'un élément DOM à part entière (sauf qu'il est désormais encore plus cool). Si votre navigateur n'est pas compatible avec les transformations 3D, rien ne se passe. Vous voyez simplement un iFrame simple dans lequel aucune rotation n'est appliquée. Si votre navigateur est compatible avec les transformations 3D, mais sans accélération matérielle, l'affichage 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 de transition CSS. Les animations et les transitions sont faciles à définir en CSS, et les appliquer à la 3D n'est pas une exception.

Il est facile d'animer des éléments auxquels une perspective 3D est appliquée. Il vous suffit de définir le style "transition" sur "transform", d'associer une durée et une fonction d'animation. À partir de ce moment, toute modification apportée au style "transform" sera animée.

Nous avons repris les exemples précédents afin d'utiliser des styles de document plutôt que des styles intégrés. Cela clarifie l'exemple et lui permet de tirer parti du pseudo-sélecteur :hover. Avec le sélecteur :hover, vous pouvez lancer des transitions en déplaçant simplement la souris sur l'élément. Parfait !

Résumé

Ce n'était qu'un aperçu rapide de certains des effets intéressants pouvant être appliqués à n'importe quel élément DOM visible à l'aide de transformations 3D CSS. De nombreuses autres choses peuvent être faites, qui n'ont pas été abordées dans ce tutoriel.