/* CODE HTML POUR UTILISATION DU STYLE *********
-> (
ou ) avec id="plyp" qui contient les 2 images
-> visible avec id="plyp_devant"
-> Paulympe JUSTE APRES DANS LE HTML avec id="plyp_derriere"
-> ajouter dans cette ligne :
-> les valeurs des variables GET w et h doivent être les dimensions de l'image #plyp_devant (tant pis si Paulympe déformé)
EXEMPLE :
-------
************************************************/
body
{
perspective: 800px;
}
#plyp
{
position: relative;
display: inline-block; /* Si c'est un il faut pouvoir le redimensionner ! */
width: 80px;
height: 80px;
}
#plyp_devant, #plyp_derriere
{
/* 2 images de même taille => mettre taille du logo officiel */
width: 80px;
height: 80px;
/* Pour superproser, faut être au même endroit ! */
position: absolute;
top: 0;
left: 0;
transition-duration: 2s;
transition-delay: 6s;
backface-visibility: hidden; /* Evite de voir le bloc de dos */
}
#plyp_derriere {
transform: rotateY(-180deg);
}
#plyp_devant:hover {
transform: rotateY(540deg);
}
#plyp_devant:hover + #plyp_derriere {
transform: rotateY(360deg);
}
