Accueil

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

CSS - introduction CSS : les principes CSS2 : principales propriétés CSS2 et les tableaux HTML Les éléments 'block' ou boites La numérotation des balises 'titre' Feuille de style pour impression La propriété POSITION Exprimer les couleurs en CSS Les fichiers "spritesheet"

Nouveautés CSS3

"Media queries" pour "responsive design" Nouveaux sélecteurs : pseudo-classes et pseudo-éléments Boites avec angles arrondis voire ombrées Images découpées - propriété clip-path & shape-outside Le codage HSL et HSLA des couleurs Nouveaux effets pour le texte Dégradés linéaires et radiaux avec CSS
Les filtres avec CSS Le raccourci "background" enrichi Le multicolonnage Révolution dans le positionnement : grid layout & flexbox Feuille de style avec des variables Intérêt du codage RGBA ou HSLA Le framework Boostrap

Transformations, transitions & animations

Les transformations 2D Les transitions Transformations 2D avec transition Les transformations 3D - principes Transformations 3D avec transition Premières animations CSS Animer des transformations 3D Animations SVG via CSS

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Transformations 3D avec transitions

Survolez chaque image 5 secondes, le temps de la transition !

Exemple 1


Si survol d'une image de la colonne de gauche, celle-ci grandit et bascule complètement, l'image apparait à l'envers.
Si survol d'une image de la colonne du milieu, celle-ci se reduit et pivote vers la droite.
Si survol d'une image de la colonne de droite, celle-ci grandit et pivote complèment, l'image apparait tel son reflet dans un miroir.

Le code HTML correspondant

Notez bien qu'à chaque image est affecté deux classes de style.

Le code CSS

Sur survol chaque image subit une translation suivie d'une rotation.

Exemple2

Dans ce deuxième exemple j'introduit une nouvelle propriété CSS backface-visibility qui est utile dans le cadre des rotations 3D.

Survolez 5 secondes chaque carte, le temps de la transition !


Sur survol une carte de la première rangée, celle-ci bascule de 180 degrés (rotationX) puis la carte disparait ...
Sur survol d'une carte de la deuxième rangée, celle-ci bascule de 180 degrés (rotationX) et alors la carte apparait inversée, tel son reflet dans un miroir.

Le code HTML

Notez qu'à chaque carte est associée deux classes.

Le code CSS

Notez l'apparition de la propriété CSS : backface-visibility. La valeur par défaut de cette propriété est "visible".
Donc je n'étais pas obligé de la mentionner dans la définition de la classe "carte2".

Effet "card flip" ou retourné de carte

Exemple

Clique sur ma photo et tu me verras nue !

Vieux cochon !

Un exemple coquin pour un problème très sérieux. Si survol de la photo initiale, une nouvelle photo apparait.

Le code HTML

L'élément .zone3d sert d'environnement 3D. pour l'objet div class ="carte" qui contient à son tour deux éléments : les DIV classés "recto" et "verso". Ces deux enfants de "carte" ont pour "background" une image.

Le code CSS

Notez l'emploi de la propriété transform-style avec la valeur "preserve-3d" dans la règle de style concernant l'élément "carte".
Ainsi les "enfants" de l'élément "carte" sont aussi positionnés en 3D.

Grâce à position : absolute les éléments "recto" et "verso" se superposent parfaitement telles les deux faces de la même carte.