HTML5 / CSS3Les transformations CSS 3D

Expresso Rennes Atalante - La Cantine Numérique Rennaise / 17 sept. 2013

Julien LE THUAUTIngénieur R&D - MBA Multimedia

HTML5, CSS3, W3C, 3D, WebGL, Jquery, PHP, Java, GITResponsive Design, UI/UX, Ergonomie des IHMWordpress, Bootstrap, Foundation

@JulienLeThuautjlethuaut

http://www.mba-multimedia.com/

Sommaire de la présentationSujets abordés

HTML5 / CSS3 Transformations, animations, transitions, support des navigateurs

Les transformations 3DScène 3D, perspective, propriétés CSS utilisées, effets simples

L’interactivitéjQuery, évènements, interaction utilisateur, effets évolués/combinés

Le projet R&D collaboratif W3DComment utiliser et améliorer ces techniques pour améliorer l’expérience du Web

Aller plus loin…WebGL, Canvas, Three.js, ressources et liens utiles

#1 - HTML5 / CSS3Transformations, animations, transitions, support des navigateurs

HTML5#1 – HTML5 / CSS3

HTML5 HTML + CSS + JS

Nouveau doctypeNouvelles balisesNouveaux attributs

Suppression d’attributs et d’éléments obsolètes

Nouvelles API

• Graphics, 3D• Semantics (microdatas, microformats…)• Offline & Storage• Device access• Connectivity (Web sockets…)• Multimedia• Performance & intégration

CSS3#1 – HTML5 / CSS3

Spécifications CSS3 également découpées en plusieurs modules. Améliorations diverses apportées aux précédentes versions. Beaucoup de nouvelles propriétés et possibilités !

• Nouveaux sélecteurs et sélecteurs plus précis• @media-queries• Webfonts• Gestion de l’opacité• Couleurs (luminance, saturation…)• Bordures (arrondies, images…)• Dégradés• Ombres• Flex box• Colonnes

+ transitions / transformations / animations

Les transitions#1 – HTML5 / CSS3

Entre 2 valeurs d’une propriété CSS, effectuer une transition douce lors du changement.http://dev.w3.org/csswg/css-transitions/

Déclenchement/application du changement :Evènement JavaScript ou pseudo-classes CSS (:hover, :active, :focus)

Possibilité d’agir sur plusieurs composantes de transition :

• Propriété CSS concernée• Durée• Timing/interpolation (ex. accélération, linéaire…)• Délai de déclenchement

Attention : Pas applicable à n’importe quellepropriété CSS (couleurs, positions, dimensions)

Démo #1

Les animations#1 – HTML5 / CSS3

Animer les pages Web ou des éléments de page sans Flash ni javascripthttp://www.w3.org/TR/css3-animations/

Animation : effet permettant un passage graduel d’un style à l’autre pour un élément

Plusieurs propriétés peuvent être concernées@keyframes : Etats de l’animation, timing défini précisément

Les différentes composantes de transition :

• Nom de l’animation (@keyframes)• Durée• Timing/interpolation • Délai de déclenchement• Nombre d’itérations• Sens de l’animation• Etat

Démo #2

Les transformations#1 – HTML5 / CSS3

Fonctions de manipulation graphique d’éléments HTML sur les axes X et Yhttp://www.w3.org/TR/css3-2d-transforms/

Ensemble de fonctions disponibles pour effectuer ces transformations simples :

• Translation• Rotation• Changement d’échelle• Inclinaison

Possibilité de combiner des transformations (Attention à l’ordre)

Transformations complexes réalisables (matrices de transformations)

Démo #3

Support des navigateurs#1 – HTML5 / CSS3

Plutôt bon, y-compris sur les navigateurs mobiles, mais toujours de mauvais élèves

Attention, problématiques matérielles ! Carte graphique, GPU (accélération matérielle…)

A connaitre : HTML5please, CanIUse• http://caniuse.com/transforms3d• http://html5please.com/

Support des navigateurs#1 – HTML5 / CSS3

Beaucoup de bibliothèques existantes :

• polyfills• fallbacks

Ne jamais baser une fonctionnalité importante ou critique sur ces effets si on ne peut pas en fournir un comportement dégradé !

Les vendor prefixes parfois nécessaires pour les propriétés non supportées en standard (risques des différences de comportement) :

• -webkit-• -moz-• -ie-• -o-

#2 - Les transformations 3DScène 3D, perspective, propriétés CSS utilisées, effets simples

Les transformations sur l’axe Z#2 – Les transformations 3D

Fonctions de manipulation graphique d’éléments HTML sur les axes X et Y et Zhttp://www.w3.org/TR/css3-3d-transforms/

Ensemble de fonctions/propriétés supplémentaires pour effectuer des transformations en utilisant l’axe Z de profondeur (Possibilité de créer des plan en 3D) :

• perspective• Translation 3D• Changement d’échelle 3D• Rotation 3D

Démo #4

Créer sa scène 3D#2 – Les transformations 3D

1. Créer un plan (= conteneur de scène, portant la perspective)

2. Créer un objet 3D (ex. cube)

3. Définir les composantes de l’objet (ex. faces du cube)

4. Appliquer les transformations nécessaires

Démo #5

Remarques diverses#2 – Les transformations 3D

Même pour les transformations 2D, utiliser ces fonctions 3D ! Accélération matérielle (GPU) meilleures perfs que moteur de rendu logiciel du navigateur

Attention à l’ordre des transformations RotateX + RotateY <> RotateY + RotateX

Attribut preserve3D pas géré correctement par iE10 (imbrications d’éléments 3D)

Backface-visibility à régler pour éviter les effets de scintillement

LIMITES

• Lourd à mettre en place sans librairie, très déclaratif…

• Scènes et objets complexes difficiles à créer/maintenir

• Pas de gestion de caméras/source de lumières

#3 - L’interactivitéjQuery, évènements, interaction utilisateur, effets évolués/combinés

Utiliser Javascript#3 – L’interactivité

Utiliser javascript pour gérer l’interaction entre la scène et l’utilisateur :

• Clics (courts, longs, doubles…)• Actions tactiles (touch, tap, swipe…)• Mouvements de souris (over, enter, leave…)

Utiliser également le matériel si possible :

• Camera• GPS• Orientation

Beaucoup de librairies jQuery existantes pour aider le développeur dans les tests de support, et dans la gestion évènementielle…

On peut donc utiliser jQuery pour effectuer des transformations sur la scène, l’objet 3D ou les composantes d’un objet (Menus, effets IHM de présentation,…)

Demo #6

#4 – Le projet R&D collaboratif W3DMieux voir, ressentir et interagir avec la 3D dans un navigateur Web

Un projet collaboratif#4 – Le projet W3D

Début du projet jan. 2011

Fin des travaux juin 2013

4 partenaires au sein du consortium W3D

http://w3d.mba-multimedia.com/

BUT : Développer de nouveaux principes et outils pour créer des sites web en 3D relief (contenant et contenu)

Les axes de recherches#4 – Le projet W3D

Vision 3D : Comment mieux voir le relief dans une page Web (sans matériel) ou donner l’illusion de relief via des effets de pseudo 3D

Ressenti 3D : Comment mieux ressentir le relief par des effets pseudo-haptiques

Interaction 3D : Comment mieux interagir avec du contenu et une interface en 3D

Parallaxe, scrolling-parallax, motion-parallax,Curseurs 2D, Curseurs 3D, Elastic images,API de communication Unity/HTML5,Dynamic cursors, transparences, flous, ombres…

Exemples appliqués au Web (Vœux 2013 / Memory)

#4 – Le projet W3D

Utilisation combinée des fonctionnalités et effets CSS3D

Utilisation et création de plugins jQuery

Veille et tests sur les nouveautés CSS (ex. CSS Filter effects)

Démos

http://2013.mba-multimedia.com/ http://3dmemory.mba-multimedia.com/

Autres travaux#4 – Le projet W3D

Travail sur l’intégration d’animations Unity dans des pages Web

Création d’une API de communication HTML5<>Unity

Création d’un prototype regroupant tous les effets utilisés, créés lors du projet (Config 3D)

Démo

Techniques d’interaction / feedback#4 – Le projet W3D

Travaux sur les curseurs 3D, curseurs dynamiques et portage sur le Web

Mise en œuvre du concept d’images élastiques

#5 - Aller plus loin…WebGL, Canvas, Three.js, CSS Filters, ressources et liens utiles

Les autres possibilités#5 – Aller plus loin

Beaucoup de possibilités, perspectives pour aller plus loin dans la 3D sur le Web

• WebGL : http://www.chromeexperiments.com/webgl/

• CSS Filter effects :

• Fonctions d’images (ex. images dynamiques créées à partir d’éléments HTML…)

• CSS & SVG masks (ex. rognage selon une forme…)

• Exclusions de formes

• advanced filters (CSS Shaders, flous, ombres, grayscale…)

Questions / Réponses

Quelques liens utiles pour se lancer :

http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

http://debray-jerome.developpez.com/articles/les-transformations-3d-en-css3/

http://desandro.github.io/3dtransforms/

http://fr.clever-age.com/veille/blog/introduction-aux-transformations-css.html

http://www.webdesignertrends.com/2011/11/css-3-experiences-avec-3d-transform/

http://gafish.fr/nouveautes-css3/

http://slides.html5rocks.com

MBA Multimedia – contact@mba-multimedia.fr