03,février
2016

Design 3D grâce au CSS3

Blog-design-graphiste-02

Pour les webdesigners qui peuvent se passer de textures ou d’éclairages poussées, le CSS possède maintenant les capacités de rendre du contenu dans un espace 3D. Il présente donc une solution plus simple afin de créer des effets 3D dans un navigateur web.

 

Conception 3D CSS

Si vous souhaitez concevoir des effets 3D simples faisant partie de l’interface de votre site web, plus besoin de se compliquer la tâche en utilisant WebGL. En effet, vous pouvez maintenant tirer parti d’une des nouvelles spécifications CSS en utilisant les transformations et transitions 3D pour déplacer votre contenu dans l’espace. Le principe n’est pas très compliqué, il faut définir plusieurs propriétés pour un élément (définissant ainsi son emplacement dans l’espace) et utiliser la propriété « transform » afin de modifier l’objet en question.

De plus, en utilisant la propriété « transition » vous pouvez animer des éléments selon l’interaction de l’utilisateur. Pour citer un exemple de cette application, nous pouvons l’utiliser pour que de simples documents, style fiches, se retournent afin de faire apparaître des informations supplémentaires en son verso. Le module de transformation 3D de CSS3 commence réellement à être pris en charge par tous les navigateurs web (IE 10, Firefox 10, Chrome 12 et Safari 4).
Il est surtout pris en charge par une très grande partie d’appareils mobiles car de nos jours c’est bien ce qui compte.

  • Articles récents

  • Email

    contact@axgraphic.fr

    Tel

    06 09 50 21 68

    Ax Graphic
    1A rue André Malraux
    34800 Nébian

  • Laisser un commentaire

    Votre adresse email ne sera pas diffusé.

    *