Accueil

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 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

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 2D ou 3D Une animation 3D complexe

Vous pouvez me contacter via Facebook (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, elle monte, diminue de taille et bascule.
Si survol d'une image de la colonne du milieu, elle va à droite, descend et subit une rotation mais la taille ne change pas.
Si survol d'une image de la colonne de droite, elle monte, diminue un peu de taille, pivote complètement et l'on voit l'image inversée (comme le reflet de celle-ci dans un miroir).

Le code HTML correspondant

... <article style ="border : 1px solid black ; perspective : 600px ; perspective-origin : center top ;"> <img src ='../images/jolie_fille.jpg' class ="petite gauche"> <img src ='../images/brune_nue.jpg' class=" petite centre" > <img src ='../images/seins_nus.jpg' class ="petite droite" > <br><img src ='../images/black_nue.jpg' class ="petite gauche" > <img src ='../images/trikini.jpg' class ="petite centre" > <img src ='../images/bikini.jpg' class ="petite droite" > </article> ...

Les images sont contenues dans la boite ARTICLE qui est une boite 3D (propriété perspective.
Ici j'ai utilisé la propriété perspective-origin car je voulais que le point fuite soit situé au milieu du haut et non pas au centre de la boite 3D.
Notez qu'à chaque image sont associées deux classes :une pour gérer la taille de l'image et une pour gérer la transformation 3D dès le survol.

Le code CSS

	img.petite {display : inline-block ; margin : 1% ; width :30%; 
		vertical-align : top ; transition : transform 5s; }
	img.gauche:hover{transform : translate3d(0,-600px,-600px) rotateX(45deg);}
	img.centre:hover{transform : translate3d(300px,300px,0) rotateZ(-45deg); }
	img.droite:hover{transform : translateZ(-300px) rotateY(180deg);}

On peut remplacer translateX, translateY, translateZ par translate3d(x,y,z); x ou y ou z peut être égal à zéro.
Il existe aussi la commande scale3d(x,y,z) qui remplace scaleX(nombre), scaleY(nombre), scaleZ(nombre).
Mais, comme vous l'aves constaté le simple faite de translater l'objet sur l'axe Z augmente ou réduit sa taille !

Exemple2

Dans ce deuxième exemple, je reviens sur les rotations dans le cadre d'une zone 3D et 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 clic, une carte de la première rangée pivote de 180 degrés (rotationY) puis la carte devient invisible ...
Sur clic une carte de la deuxième rangée bascule de 180 degrés (rotationX) et alors la carte apparait inversée, tel son reflet dans un miroir.
Sur clic une carte de la troisième rangée se retourne de 180 degrés (rotationZ).

Le code HTML

<article style ="border : 1px solid black ; perspective : 400px ;"> <img src="../images/as_coeur.jpg" class ="petite carte1"/> <img src="../images/as_carreau.jpg" class ="petite carte1" /> <img src="../images/as_trefle.jpg" class ="petite carte1"/> <br> <img src="../images/roi_coeur.jpg" class ="petite carte2"/> <img src="../images/roi_carreau.jpg" class ="petite carte2" /> <img src="../images/roi_trefle.jpg" class ="petite carte2" /> <br> <img src="../images/as_pique.jpg" class ="petite carte3"/> <img src="../images/roi_pique.jpg" class ="petite carte3"/> </article>

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

Le code CSS

...
	img.petite {display : inline-block ; margin : 1% ; width :30%; vertical-align : top ; 
		transition : transform 5s; }
	...
	img.carte1:active{transform : rotateY(180deg); backface-visibility : hidden; }
	img.carte2:active{transform : rotateX(180deg); }
	img.carte3:active{transform : rotateZ(180deg); }
...

Notez l'apparition d'une nouvelle propriété CSS : backface-visibility. La valeur par défaut de cette propriété est "visible".
Aussi n'est-elle pas mentionnée dans la définition de la classe "carte2" donc l'image peut apparaitre à l'envers.

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

<article class="zone3d"> <div class="carte"> <div class="recto" style ="background : url(../images/bikini.jpg);background-size : cover;" > </div> <div class="verso" style ="background : url(../images/burkini.jpg); background-size : cover;" > <h3> Vieux cochon ! </h3> </div> </div> </article>

L'élément .zone3d sert d'environnement 3D. pour l'objet div class ="carte" qui contient à son tour deux éléments : les div affectés des classes ".recto" et ".verso".
Chaque enfant de "carte" a pour "background" une image.

Le code CSS

	.zone3d {width: 300px;  height: 400px;  perspective: 1000px;}
	.carte {position: relative;  width: 100%;  height: 100%;  transition: transform 2s;  
		transform-style: preserve-3d;}
	.zone3d:active .carte{transform: rotateY(180deg);}
	.recto, .verso {position: absolute;  width: 100%;  height: 100%;  
		backface-visibility: hidden;}
	.verso {transform: rotateY(180deg);}

Notez l'emploi de la commande transform-style: preserve-3d dans la règle de style concernant l'élément "carte".
En effet la perpective du conteneur ("zone3d") ne profite par défaut qu'aux enfants (descendants directs). Donc pour que les enfants de "carte" soient aussi 3D il faut propager la 3D avec cette commande.

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