Recto-verso
On arrive ici sur une page qui a eu le don de m'énerver. Certaines propriétés fonctionnent sur un navigateur, d'autres vont fonctionner sur un autre, ça devient vite pénible car, dans la mesure du possible, il faut faire en sorte que nos présentations fonctionnent sur un maximum de navigateurs. Certaines animations qui semblent simples s'avèrent en fin de compte plus complexes que prévu.
Les animations de cette page sont faites pour gagner de la place sur une page en ayant deux contenus différents au même emplacement. Les utilisations en sont multiples. Ça peut être une photo et un commentaire, une église et les horaires des messes ou tout ce qui peut vous passer par la tête.
<style>
#conteneur {
float:left;
margin-right: 8px;
width: 203px;
height: 405px;
}
#flip, #flip > div {
width: inherit;
height: inherit;
transition: transform 2s;
-webkit-transition: transform 2s;
}
#flip > div {
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#avant, #arriere {
border-radius: 15px;
-webkit-border-radius: 15px;
}
#avant {
background-image: url("carte1.jpg");
transform: perspective(600px) rotatey(0deg);
-webkit-transform: perspective(600px) rotatey(0deg);
}
#arriere {
background-image: url("carte2.jpg");
transform: perspective(600px) rotatey(180deg);
-webkit-transform: perspective(600px) rotatey(180deg);
}
#conteneur:hover #avant{
transform: perspective(600px) rotatey(180deg);
-webkit-transform: perspective(600px) rotatey(180deg);
}
#conteneur:hover #arriere{
transform: perspective(600px) rotatey(360deg);
-webkit-transform: perspective(600px) rotatey(360deg);
}
</style>
<div id="conteneur">
<div id="flip">
<div id="avant"></div>
<div id="arriere"></div>
</div>
</div>
#conteneur est, comme son nom l'indique la boîte qui va contenir l'animation.
#flip contient les deux images et les paramètres de l'animation.
#avant est la face avant de la carte
#arriere est la face arriere de la carte
Il n'y a rien de particulier à dire sur #conteneur si ce n'est qu'il donne les dimensions de l'animation. Par contre, dès que la souris passe dessus (#conteneur:hover) son comportement change en fonction de l'image affichée.
Nous utilisons deux fonctions de la propriété transform:, perspective() et rotatey(). La fonction perspective() indique la distance supposée entre l'axe de rotation et vous. Plus la valeur sera basse et plus l'effet de perspective sera marqué. A l'inverse, plus la valeur sera grande et moins l'effet sera perceptible. Une valeur égale à zéro ou négative n'aura aucun effet. Le fait de faire pivoter l'image arrière sur 360 degrés est là pour faire plaisir à Explorer mais en contrepartie, Firefox hérite de "pétouilles" pas toujours très agréables.
La propriété backface-visibility: indique que la face arrière d'une image est visible (visible) ou pas (hidden). Cette face arrière n'est que virtuelle ce qui fait que si vous mettez la valeur visible, vous obtiendrez une image "inversée" comme si l'image était transparente.
COUCOU
Voilà un exemple qui est plus parlant qu'une explication.
<style>
#carre {
width: 200px;
height: 200px;
background-color: cyan;
color: red;
font-family: Arial;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 185px;
transform: perspective(600px) rotatey(0deg);
-webkit-transform: perspective(1000px) rotatey(0deg);
transition: transform 2s;
-webkit-transition: transform 2s;
}
#carre:hover {
backface-visibility: visible;
-webkit-backface-visibility: visible;
transform: perspective(600px) rotatey(180deg);
-webkit-transform: perspective(1000px) rotatey(180deg);
transition: transform 2s;
-webkit-transition: transform 2s;
}
</style>
<div id="carre">COUCOU</div>
Tas de riz, tas de rats
Tas de riz tentant
Tas de rats tentés
Tas de riz tentant tenta
Tas de rats tentés.
Tas de rats tentés tata
Tas de riz tentant.
Tas de riz tentant
Tas de rats tentés
Tas de riz, tas de rats
Voici un deuxième exemple, plus simple à mettre en œuvre, afin d'utiliser le même emplacement pour mettre deux informations. Le code est plus simple à comprendre et ne comporte pas de difficulté particulière.
J'ai utilisé une photo de la basilique de Fourvière à Lyon que j'ai coupée en deux parties égales. Le texte est un texte qui sert pour apprendre à articuler en rythme.
<style>
#anim {
position: relative;
background-color: yellow;
width: 480px;
height: 360px;
padding: 0px;
overflow: hidden;
font-family: Arial;
text-align: center;
font-size: 24px;
font-weight: bold;
color: red;
}
#anim:hover #F0 {
transition: transform 2s;
transform: translatex(-240px);
-webkit-transition: transform 2s;
-webkit-transform: translatex(-240px);
}
#anim:hover #F1 {
transition: transform 2s;
transform: translatex(240px);
-webkit-transition: transform 2s;
-webkit-transform: translatex(240px);
}
#F0, #F1 {
position: absolute;
width: 240px;
height: 360px;
top: 0px;
transition: transform 2s;
transform: translatex(0px);
-webkit-transition: transform 2s;
-webkit-transform: translatex(0px);
cursor: grab;
}
#F0 {
background-image: url("F0.jpg");
left: 0px;
}
#F1 {
background-image: url("F1.jpg");
left: 240px;
}
</style>
<div id="anim">
<br>
Tas de riz, tas de rats<br>
Tas de riz tentant<br>
Tas de rats tentés<br>
Tas de riz tentant tenta<br>
Tas de rats tentés.<br>
Tas de rats tentés tata<br>
Tas de riz tentant.<br>
Tas de riz tentant<br>
Tas de rats tentés<br>
Tas de riz, tas de rats
<div id="F0"></div>
<div id="F1"></div>
</div>
Trois balises <div> suffisent pour cette animation. La première, #anim contient le texte et les deux images qui forment l'animation.
#F0, #F1 décrit les points communs qui existent entre les deux images. L'animation est décrite ici pour le retour des images. Sans cela, lorsque la souris quitte l'animation, les deux images se remettraient en place brutalement.
cursor: grab; Le curseur de la souris se transforme en main lorsque la souris passe sur l'image.
#anim:hover #F0 [#F1] Décrivent les mouvements des images lorsque la souris passe sur l'animation.
Il y a de nombreuses valeurs possibles pour la propriété cursor:. Les curseurs peuvent varier en fonction de votre navigateur. Beaucoup font double emploi au niveau du redimensionnement.
 | default | Curseur par défaut, en général une flèche |
| none | Il n'y a pas de curseur de souris | |
 | context-menu | Indique un menu contextuel (uniquement sur Explorer 10 et + |
 | help | Indique qu'une aide est disponible |
 | pointer | Généralement utilisé sur les liens |
 | progress | Le programme est occupé en arrière plan mais une interaction est possible |
 | wait | Le programme est occupé et l'interaction n'est pas possible |
 | cell | Indique que des cellules peuvent être sélectionnées |
 | crosshair | Utilisé pour une sélection sur une image |
 | text | Du texte peut être sélectionné |
 | vertical-text | Du texte vertical peut être sélectionné |
 | alias | Un alias ou un raccourci va être créé |
 | copy | Indique que quelque chose peut être copié |
 | move | Indique que quelque chose peut être déplacé |
 | no-drop | Rien ne peut être déplacé à cet endroit |
 | not-allowed | Indique que quelque chose ne peut pas être fait |
 | all-scroll | A le même effet que move |
 | col-resize | La colonne peut être redimensionnée |
 | row-resize | La ligne peut être redimensionnée |
 | n-resize | Redimensionnement vertical |
 | e-resize | Redimensionnement horizontal |
 | w-resize | Redimensionnement horizontal |
 | s-resize | Redimensionnement vertical |
 | ne-resize | Redimensionnement en diagonale |
 | nw-resize | Redimensionnement en diagonale |
 | se-resize | Redimensionnement en diagonale |
 | sw-resize | Redimensionnement en diagonale |
 | ew-resize | Redimensionnement horizontal |
 | ns-resize | Redimensionnement vertical |
 | nesw-resize | Redimensionnement en diagonale |
 | nwse-resize | Redimensionnement en diagonale |
 | zoom-in | On peut zoomer l'élément |
 | zoom-out | On peut dézoomer l'élément |
 | grab | L'objet peut être attrapé et déposé |
 | grabbing | Idem grab |
Il existe une autre valeur pour la propriété cursor, auto qui équivaut à ne rien mettre, le navigateur se charge de la gestion des curseurs.
Les seules deux différences entre cette animation et la précédente sont que l'on utilise deux photos sur celle-ci et, que cette fois, il y a quatre morceaux qui bougent.
Je vous mets le code sans commentaire, il se suffit à lui-même.
<style>
#anim2 {
position: relative;
background-image: url("ch.jpg");
width: 600px;
height: 400px;
overflow: hidden;
}
#P1, #P2, #P3, #P4 {
position: absolute;
height: 400px;
top: 0px;
margin: 0px;
padding: 0px;
transition: transform 2s;
transform: translatey(0px);
-webkit-transition: transform 2s;
-webkit-transform: translatey(0px);
}
#P1 {
background-image: url("P01.jpg");
left: 0px;
width: 200px;
}
#P2 {
background-image: url("P02.jpg");
left: 200px;
width: 100px;
}
#P3 {
background-image: url("P03.jpg");
left: 300px;
width: 100px;
}
#P4 {
background-image: url("P04.jpg");
left: 400px;
width: 200px;
}
#anim2:hover #P1 {
transition: transform 2s;
transform: translatex(-200px);
-webkit-transition: transform 2s;
-webkit-transform: translatex(-200px);
}
#anim2:hover #P4 {
transition: transform 2s;
transform: translatex(200px);
-webkit-transition: transform 2s;
-webkit-transform: translatex(200px);
}
#anim2:hover #P2 {
transition: transform 2s;
transform: translatey(-400px);
-webkit-transition: transform 2s;
-webkit-transform: translatey(-400px);
}
#anim2:hover #P3 {
transition: transform 2s;
transform: translatey(400px);
-webkit-transition: transform 2s;
-webkit-transform: translatey(400px);
}
</style>
<div id="anim2">
<div id="P1"></div>
<div id="P2"></div>
<div id="P3"></div>
<div id="P4"></div>
</div>