Souscrire
Blog iamvdo.meDans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li).
<div class="menu">
<ul>
<li>
<a href="">Home</a>
<div>
<h3>Home</h3>
<p>Bienvenue sur le site CSS3Create</p>
</div>
</li>
<li>
<a href="">News</a>
<div>
<h3>News</h3>
<p>Pleins de news sur CSS3 et sur HTML5</p>
</div>
</li>
...
</ul>
</div>Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués.
ul li{
width:30px;
overflow:hidden;
transition:width 1s ease 0.15s;
}
ul li a{
transform:rotate(-90deg);
}Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. Le fait d’agrandir la taille laisse donc apparaitre une div dans laquelle il est possible de rajouter n’importe quel élément HTML.
ul li:hover{
width:360px;
}L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. IE9 ne permet ni les transitions ni les transformations CSS.
Voir aussi : Menu avec slider effet transition
#1par cedricici, le 15 mars 2011
Ca tourne sur plateforme mobile cette transition ? c’est vraiment adapté si c’est le cas !!
#2par Giordano, le 8 juillet 2011
Bonjour Bonsoir,
Ne manquerait-il pas du code chinonen ??
#3par css3create, le 8 juillet 2011
@Giordano : chinonen ?
#4par Bunnybugs, le 26 août 2011
Salut ! Le code STP merci !
#5par WebMaster, le 27 août 2011
Pourrais-vous mettre le code source, cela faciliterait les choses ou l’envoyer par e-mail si c’est possible. Car l’effet ne se fait pas. Les liens se mettent en ligne et non en vertical. Cordialement
#6par WebMaster, le 28 août 2011
Re, c’est bon j’ai réussi, y fallait juste récupérer ton code source de la ligne 64 jusque 214 pour le css et 628 jusque 651 pour le html. J’espère en aider certain, car en essayant ton code donner ça ne donne pas le résultat là. Merci encore, un site qui vaut le coup de voir :D
#7par #7, le 19 octobre 2011
salut à tous.
j’ai un souci avec la div qui contient le h3 et le p. ca affiche le texte en dessous du lien mais a gauche. comment vous faites plz ?
#8par Onil, le 14 janvier
Bonsoir
Je trouve l’effet vraiment sympa. Seulement je voudrais faire ces vignettes sur toute la hauteur d’une page. ET ca fait maintenant plusieurs jours que j’essaie mais à part dégrader le code, je n’arrive à rien. Quelle est la procédure à faire ? Que dois-je modifier ?
#9par vive firefox10, le 14 janvier
Encore au top ! Exploit css3. Je trouve ce site a la hauteur de ce que le web attend.
Bravo !
#10par pbox93, le 24 janvier
Bonjour tous le monde je voulais savoir si le CSS3 est valide par la norme W3C
#11par Krag, le 15 février
Très bel effet.
Néanmoins, aller au bout du tutoriel aurait été mieux vis à vis de tous ceux qui vous lisent, au lieu de poster 3 lignes de codes qui génèrent plus de frustration qu’autre chose.
Merci
#12par antonin, le 21 avril
Salut, et merci beaucoup pour ce tuto ! :)
Pourrais tu faire parvenir le code source stp ?
Merci beaucoup, je galère depuis ce matin... :/