/* IMAGE (icône) */
.Xplo1 img{
width: 70px;
height: 70px;
margin: 10px;
padding: 0;
-webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
-o-transition: all 1s linear 0s;/* pour navigateur opera */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}
/* IMAGE (icône) AU SURVOL */
.Xplo1:hover img {
-webkit-transform : rotate(360deg);/* pour navigateur webkit */
-moz-transform : rotate(360deg); /* pour navigateur mozilla */
-o-transform : rotate(360deg);/* pour navigateur opera */
transform: rotate(360deg); /* pour les navigateurs récents */
}




/* IMAGE (icône) */
.Xplo2 img{
width: 60px;
height: 60px;
margin: 10px;
padding: 0;
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs récents */
}
/* IMAGE (icône) AU SURVOL */
.Xplo2:hover img {
width: 96px;
height: 96px;
-webkit-transform : rotate(-360deg);/* pour navigateur webkit */
-moz-transform : rotate(-360deg); /* pour navigateur mozilla */
-o-transform : rotate(-360deg);/* pour navigateur opera */
transform: rotate(-360deg); /* pour les navigateurs récents */
}

HTML



/* INFOBULLE - TRANSITION */
.NU_infobulle{
width: 100px;
margin: auto;
padding: 0;
float: left;
position: relative;
}
.NU_bulle{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
position: absolute;
top: 100px;
left: 70px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs récents */
}
.NU_infobulle:hover .NU_bulle{
width: 150px;
height: 50px;
padding: 5px;
border-width: 1px;
}







/* BLOC CONTENANT L'INFOBULLE - L’ICÔNE */
.transition-NU{
position: relative;
width: 50px;
float: left;
margin: 10px;
padding: 0;
}
/* INFOBULLE */
.NU_transition{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
overflow: hidden;
position: absolute;
left:80px;
top: 0;
z-index: 999;
padding: 0;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur webkit */
-moz-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur mozilla */
-o-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur opera */
transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour les navigateurs récents */
}
/* INFOBULLE AU SURVOL */
.transition-NU:hover .NU_transition{
height: 70px;
width: 200px;
padding: 5px;
border-width: 1px;
}
/* IMAGE (icône) */
.transition-NU img {
position: relative;
z-index: 990;
left: 0;
bottom: 0;
-webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
-o-transition: all 1s linear 0s;/* pour navigateur opera */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}
/* IMAGE (icône) AU SURVOL */
.transition-NU:hover img {
-webkit-transition: rotate(-360deg);/* pour navigateur webkit */
-moz-transform: rotate(-360deg); /* pour navigateur mozilla */
-o-transform: rotate(-360deg);/* pour navigateur opera */
transform: rotate(-360deg); /* pour les navigateurs récents */
}