Termes CSS clés employés : background-position, :hover.
Compatibilité navigateurs : tous.
Donner l’illusion d’un déplacement 3D d’une image à l’aide du pointeur.
Pour obtenir une illusion de 3D sur une image, il faut décomposer celle-ci en différents plans. Ces plans seront positionnés de façon légèrement décalée selon la position du pointeur. Cela implique donc l’emploi de la pseudo-classe :hover.
Si le fond peut être de format quelconque, les autres plans doivent posséder un fond transparent, ce qui implique une image au format png avec canal alpha de transparence. L’étape « dessin » est donc importante, et nécessite un peu de connaissance en traitement d’image, thème extérieur au sujet de ce livre. Plus vous posséderez de plans et plus l’effet sera réaliste. Le fond doit être de largeur nettement supérieure à la taille affichée.
Une fois les images réalisées, vous décidez de ce qui sera le plan fixe : l’élément autour duquel pivotera la vue. Les plans situés en dessous seront décalés en sens inverse de ceux situés au dessus, tout éloignement du plan pivot entraînant un décalage progressivement plus important. L’image originelle est rétablie lorsque le pointeur est au milieu.
La structure HTML est assez simple. J’ai choisi ici un élément conteneur qui renferme un autre élément conteneur (ici de classe segment) renfermant lui-même l’image proprement dite : un élément DIV auquel est appliqué en images d’arrière-plan les différentes composantes de l’image (ici, le fond proprement dit, puis les trois couches de la fleur). L’élément segment servira à gérer la position du pointeur.
<DIV class="carte">
<DIV class="segment" id="a0" href="#">
<DIV class="image3D"></DIV>
</DIV>
…
</DIV>
Cette structure (le DIV segment et ses enfants) est répétée autant de fois que vous voulez de possibilités de mouvement. Un réalisme parfait et une fluidité impeccable signifieraient autant de répétitions que l’image affichée compte de pixels en largeur, mais cela est un peu lourd. En pratique, un déplacement d’un pixel sur le premier plan est souvent suffisant : j’ai retenu ici treize éléments, avec des identifiants allant de a0 à a12.
Passons au code CSS. L’élément DIV carte est classique. Ses dimensions dépendent uniquement de l’image retenue. On lui affecte en fond l’image non modifiée (ici la carte complète), les propriétés de bordure servant uniquement à donner l’aspect « carte ». Remarquez que sa propriété overflow est fixée à hidden.
DIV.conteneur {
margin: 50px auto 40px;
width: 210px;
height: 300px;
overflow:hidden;
background-image: url("blackLotus.jpg");
border: 10px solid black;
border-radius:10px;
}
L’élément DIV segment, qui va gérer les déplacements, possède une largeur égale ici à 1/13e de l’image, soit 16 pixels.
DIV.segment {
position: relative;
float:left;
top: 0px;
left:0px;
width: 16px;
height: 300px;
z-index:2;
}
Puis on passe à la définition de son enfant, donc ici l’image 3D elle-même. ces enfants. Son affichage par défaut est interdit. Sa largeur est celle du dessin à afficher. Les quatre composants de l’image sont placées en images d’arrière-plan, dans l’ordre inverse de leur ordre d’affichage (la première sera située au premier plan). La répétition est interdite. La position de chaque image d’arrière-plan, ne figurant ici que pour mémoire, dépend de la position de la composante dans l’image originelle : les positions effectives pour la position «médiane ».
div.image3D {
display:none;
position: relative;
float:left;
left: 20px;
top: 24px;
width:171px;
height:140px;
background-image: url('lotus_3.png'), url('lotus_2.png'), url('lotus_1.png'), url('lotus_0.png');
background-repeat:no-repeat;
background-position: 70px 36px, 64px 35px, 73px 34px, -12px 0px; /* rappel de la position médiane */
}
Vient ensuite la définition de l’élément segment primordial : c’est lui qui va gérer les déplacements.
div.segment {
position: relative;
float:left;
width: 16px;
height: 300px;
z-index:2;
}
On gère ensuite l’affichage par défaut de l’image enfant lorsque le parent est survolé :
div.segment:hover div.image3D{display:block;}
Vient enfin le cœur du système : pour les 13 structures retenues, on ajuste successivement les positions des quatre images d’arrière-plan, à l’aide de la propriété background-position et ainsi que la marge gauche de l’élément. Je ne montre ici que les extrêmes et l’élément médian :
div#a0:hover div.image3D {background-position: 73px 36px, 64px 35px, 70px 34px, -22px 0px;
margin-left:0px;}
div#a1:hover div.image3D {background-position: 73px 36px, 64px 35px, 70px 34px, -22px 0px;
margin-left:-16px;}
…
div#a6:hover div.image3D {background-position: 70px 36px, 64px 35px, 73px 34px, -12px 0px;
margin-left:-96px;}
…
div#a11:hover div.image3D {background-position: 67px 36px, 64px 35px, 76px 34px, -2px 0px; margin-left:-176px;}
div#a12:hover div.image3D {background-position: 67px 36px, 60px 36px, 76px 34px, -0px 0px;
margin-left:-192px;}
Quelques explications sont nécessaires, car les chiffres retenus ne dépendent que des images concernées. Chaque élément de navigation mesurant 16 pixels de largeur, le décalage de la marge gauche sera un incrément négatif de 16 pixels. Remarquez que pour l’élément médian a6, cela correspond exactement à l’image « normale ». Bien sûr, seules les positions horizontales sont modifiées, les positions verticales restent constantes.
Déplacez votre souris sur le texte de la carte pour faire bouger l'image en trois dimensions...
|
|---|