Images avec flip-2
Des images qui changent lors du survol de la souris
avec des flips (des rotations), anecdotique... ou pour varier les effets.
![](img/imagettes/star.png)
rotation centrale
![](img/imagettes/global.png)
Voilà de la place pour afficher un autre contenu.
rotation horizontale
![](img/imagettes/folder128.png)
Voilà de la place pour afficher un autre contenu.
rotation verticale
![](img/imagettes/compose.png)
Voilà de la place pour afficher un autre contenu.
avec des réglages différents
![](img/imagettes/document256.png)
Voilà de la place pour afficher un autre contenu.
(tailles, fond du back-face...)
Dans la partie <style> </style> à placer impérativement en premier dans le code source de l'article ou de la boite libre.
Il y a ceci :
(Il est toujours possible de ne placer que La partie surlignée dans styleplus.)
<style type="text/css">
#f1_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background-color: #F2D9E4;
border:1px solid #cccccc;
border-radius:30px;
}
#f1_container {
perspective: 500px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.5s linear;
}
#f1_container:hover #f1_card {
transform: rotateZ(360deg);
border-radius: 30px;
box-shadow: 5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back1 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #217285;opacity:0.9;
border-radius:30px;
}
#f2_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background-color: #D0E0F0;
border:1px solid #cccccc;
border-radius:30px;
}
#f2_container {
perspective: 500px;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateX(180deg);
border-radius: 30px;
box-shadow: 5px -5px 5px #aaa;
}
.face.back2 {
display: block;
transform: rotateX(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #217285;opacity:0.9;
border-radius:30px;
}
#f3_container {
position: relative;
margin: 10px auto;
width: 128px;
height: 192px;
z-index: 1;
background-color: #EDB8F5;
border:1px solid #cccccc;
border-radius:30px;
}
#f3_container {
perspective: 500px;
}
#f3_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f3_container:hover #f3_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaa;
}
.face.back3 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #3A1B52;opacity:0.9;
border-radius:30px;
}
#f4_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background-color: #D0ECF0;
border:1px solid #cccccc;
border-radius:30px;
}
#f4_container {
perspective: 500px;
}
#f4_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f4_container:hover #f4_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaa;
}
.face.back4 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #15434F;opacity:0.9;
border-radius:30px;
}
#f5_container {
position: relative;
margin: 10px auto;
width: 256px;
height: 192px;
z-index: 1;
background-color: #FCE1CD;
border:1px solid #cccccc;
border-radius:30px;
}
#f5_container {
perspective: 500px;
}
#f5_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f5_container:hover #f5_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaa;
}
.face.back5 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #702F10;opacity:0.9;
border-radius:30px;
}
</style>
Dans cette partie, Chacune des images a son propre id #f1_container et #f1_card , #f2_container et #f2_card ... jusqu'à #f5_container et #f5_card .
Seule la classe .face {...} n'est présente qu'une seule fois dans la mesure où ses règles ne changent pas.
Par contre, il y a différenciation de la classe .face.back en .face.back1 , .face.back2 ... .face.back5 afin de régler les attributs des versos (couleur de fond, opacité, couleur du texte...).
transform: rotateZ(360deg); permet une rotation centrale complète... J'ai laissé les attributs du verso, mais celui-ci ne sert évidemment à rien.
transform: rotateX(180deg); permet une rotation horizontale. N'oubliez pas de l'affecter aussi à #fxxx_container:hover #fxxx_card et à .face.backxxx sinon votre verso ne sera pas orienté correctement.
transform: rotateY(180deg); permet une rotation verticale. N'oubliez pas de l'affecter aussi à #fxxx_container:hover #fxxx_card et à .face.backxxx sinon votre verso ne sera pas orienté correctement.
Les autres réglages sont les mêmes que ceux de la page précédente. Ici a simplement aussi été ajouté un background-color dans les #fxxx_container{...} juste pour changer ...
Dans le corps de l'article a été placé ce code :
<div style="margin-right:50px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="img/imagettes/star.png" /></div>
<div class="back1 face center"> /* inutile ici evidemment */
</div>
</div>
</div>
<p style="text-align:center;"><strong><span style="font-size:14px;">rotation centrale</span></strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f2_container">
<div id="f2_card">
<div class="front face"><img src="img/imagettes/global.png" /></div>
<div class="back2 face center">
<p><span style="font-size:14px;">Voilà de la place pour afficher un autre contenu.</span></p>
</div>
</div>
</div>
<p style="text-align:center;"><strong><span style="font-size:14px;">rotation horizontale</span></strong></p>
</div>
<div style="margin-top:20px; clear:both;"></div>
<div style="margin-right:10px; display: inline-block;">
<div id="f3_container">
<div id="f3_card">
<div class="front face"><img src="img/imagettes/folder128.png" /></div>
<div class="back3 face center">
<p><span style="font-size:14px;">Voilà de la place pour afficher un autre contenu.</span></p>
</div>
</div>
</div>
<p style="text-align:center;"><strong><span style="font-size:14px;">rotation verticale</span></strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f4_container">
<div id="f4_card">
<div class="front face"><img src="img/imagettes/compose.png" /></div>
<div class="back4 face center">
<p><span style="font-size:14px;">Voilà de la place pour afficher un autre contenu.</span></p>
</div>
</div>
</div>
<p style="text-align:center;"><strong><span style="font-size:14px;">avec des réglages différents</span></strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f5_container">
<div id="f5_card">
<div class="front face"><img src="img/imagettes/document256.png" /></div>
<div class="back5 face center">
<p><span style="font-size:14px;">Voilà de la place pour afficher un autre contenu.</span></p>
</div>
</div>
</div>
<p style="text-align:center;"><strong><span style="font-size:14px;">(tailles, fond du back-face...)</span></strong></p>
</div>
Comme précédemment, les parties <div> </div> en ... servent à les placer dans le même flux, à fixer des marges, à renvoyer à la ligne. Dans ces <div> sont également inclues les légendes sous les images.
Seules les parties <div> </div> en ... servent réellement aux images.
Notez bien, pour les versos, la numérotation des classes class="back1 face center" class="back2 face center" ... class="back5 face center"
Merci à Bernard Bradshaw pour son tutoriel.
Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.
Catégorie : Astuces - Changements au survol
Page lue 55444 fois