Blog iamvdo.meEtape 1 : Gérer les transformations
On utilise tout d’abord les transformations CSS pour gérer la rotation avec transform : rotate(angle). La rotation se fait par rapport à un axe qui n’est pas le centre de l’élément avec transform-origin : x y ;.
Voici le code HTML utilisé :
<dl class="menu">
<dt class="btnRot">Partagez</dt>
<dd><a href="">...</a></dd>
<dd><a href="">Delicious</a></dd>
<dd><a href="">Facebook</a></dd>
<dd><a href="">Twitter</a></dd>
</dl>
<div class="masque"></div>
<div class="ombre"></div>Tout d’abord, positionnement du menu en haut, et positionnement des liens masqués à l’envers :
dl.menu{
position: absolute;
top: 20px;
transform-origin: 50% 115px;
}
dl.menu dd{
transform: rotate(180deg);
}Puis au hover, on pivote le menu de 180 degrés :
dl.menu:hover{
transform: rotate(-180deg);
}Etape 2 : ajout des animations
Ensuite, les animations permettent de faire pivoter le menu avec un effet de balancier : le menu bascule deux fois avant de s’arrêter en bas.
Tout d’abord le menu descend (animation bounceIn)
dl.menu:hover{
animation: bounceIn 0.7s ease-in-out ;
}
@keyframes bounceIn {
from {transform: rotate(0deg);}
75% {transform: rotate(-200deg);}
90% {transform: rotate(-175deg);}
to {transform: rotate(-180deg);}
}Puis remonte (animation bounceOut) :
div.menu{
animation: bounceOut 0.7s ease-in-out;
}
@keyframes bounceOut {
from {transform: rotate(-360deg);}
0% {transform: rotate(-180deg);}
10% {transform: rotate(-160deg);}
to {transform: rotate(-360deg);}
}Enfin, une div id="masque" et une div id="ombre" sont nécessaires pour créer l’effet de superposition des éléments et ainsi permettre au menu d’être caché. À vous d’adapter ensuite ce code pour vos designs. Regardez le code source dans la partie <head> pour le code complet.
Note : n’oubliez pas non plus l’ajout de tous les préfixes propriétaires pour un fonctionnement dans la majorité des navigateurs du marché.
#1par simon, le 20 février 2011
Un gros merci pour le tutoriel. Simon
#2par css3create, le 20 février 2011
De rien ! Content que ça puisse servir. N’hésitez pas à posez vos questions.
#3par Roland, le 1er mars 2011
C’est un très bon tutoriel, intéressant à mettre en pratique justement pour tout se qui est partage social.
Bonne continuation
ps : je vous empreinte l’idée ;)
#4par LCProd, le 19 avril 2011
Vraiment très bon ! beau boulot :) je suis fan et je tweet :)
#5par SolidSnake, le 12 mai 2011
Très très bon, je suis de plus en plus impressionné avec le CSS. Je préfère même l’animation sous Opera, ça fait plus "propre" je trouve sans le rebond. En tout cas, merci pour le tuto.
#6par G.Crofte, le 18 mai 2011
Excellent effet :)
Bien joué !
#7par Malik, le 27 juin 2011
Le plus cool c’est qu’il y a même pas de licence !
Merci beaucoup !!!
#8par Almux, le 27 juin 2011
Immense merci pour cette démo !
Je vais tenter de l’utiliser... si je trouve un bon "ersatz" CSS pour IE 7, 8, 9... Ce qui n’est pas gagné !
Mais qui ne tente rien, n’a rien !
#9par Malik, le 27 juin 2011
Qu’est ce que tu appelle Ersatz ?
#10par maldives59, le 5 juillet 2011
J’aime vraiment :)
Mais je trouve dommage que vous ne donniez pas tout le code source, pour que cela puisses être plus facile a comprendre et a adapter.
Dommage que le div "masque" et "ombre" ne soit pas espliqué...
Sinon je trouve que vous avez beaucoup d’idées :)
#11par maldives59, le 5 juillet 2011
Désoler pour le double post,
Lorsque je dis "tout le code", ce n’est pas tout le code d’affilé mais par exemple, les parties pour la couleur etc....
Je pense que cela serais mieux si vous détalliez plus vos tuto.
Sinon, j’aime vraiment cette partie de menu, et j’aimerais bien l’utiliser pour en faire un menu complet.
J’ai malheureusement beaucoup de difficultés a mettre en application le tuto (même en regardant le code CSS du site je n’arrive pas a m’en sortir.
Vous serez T-il possible de m’aider a débugger ? Et si oui, comment ?
Je le redis, J’aime beaucoup votre travail et votre créativité :)
Continuez comme ça !
#12par css3create, le 7 juillet 2011
@maldives59 : Je peut vous aider à débugger, oui ! Pour cela, envoyer moi l’adresse d’une démo en ligne.
#13par maldives59, le 12 juillet 2011
Merci pour m’aider :)
Vous pouvez trouver le début de mon travail ici : http://ip-net.tk/menuretournant/ind...
A bientot
#14par bysmo, le 17 août 2011
Cool. Bravo, à nous donc de jouer aussi.
#15par Fllan, le 30 août 2011
ça marche sous Firefox 6.0
#16par rafmax, le 7 septembre 2011
Bonjour bon tuto, mais moi aussi, sa ne marche pas ! pourquoi donc ? si vous trouvez la solution, auriez vous la gentillesse de m’envoyer votre solution s’il vous plait ? merci !
#17par ryuran, le 9 septembre 2011
c’est Joli et original mais il y a un gros soucis niveaux navigation au clavier
#18par epizod, le 11 octobre 2011
Salut, super demo, BRAVO !!!!
j’ai essayé de le refaire pour tester malheureusement, je n’ai pas d’effet qui se reproduit dans mon navigateur ??? Firefox 7.0.1
#19par dem, le 11 octobre 2011
c’es de la merde tuto est nul
#20par altair, le 22 octobre 2011
très beau à voir (tout comme le reste du site)
par contre je suis un peut septique pour l’utilisation d’un tel menu dans un site web. A mon avis question usabilité, c’est pas super.
Mais à part ce fait j’adore !!
#21par Fred, le 13 novembre 2011
Gros fan de ce site depuis que je l’ai decouvert, travail impressionnant...de + en + bluffé par CSS3. Il me tarde le jour ou enfin tous les navigateurs interpretrons ces commandes...foutu IE !
#22par Kikimagik, le 16 novembre 2011
Une question me reste sans réponse : comment créer t-on cet effet de fente ou ce cache le menu ?? Impossible à reproduire ou alors avec beaucoup trop de "bidouillages". Serais t’il possible de m’en dire un peu plus. Merci
#23par css3create, le 16 novembre 2011
@Kikimagik : une div masque le menu à l’envers (Cette div a un background), et une div crée l’ombre. Les 2 divs sont en positionnement absolute avec un z-index de 40 et 50. (regardes dans le code source ligne 143-168...)
#24par Kikimagik, le 24 novembre 2011
@css3create : Merci de ton aide ! Effectivement ceci est bien un chevauchement de DIV comme je le pensais. Simplement oublié les positions absolute... du coup sa fonctionne beaucoup moins bien. Merci encore pour tes supers tutos !
#25par lepingouin, le 5 janvier 2012
salut,
Merci beaucoup,
je suis débutant et je comprend pas tout, j’ai seulement des lien basic mais rien d’autre.
quelqu’un pourrais poster son code css en entier ? ce serait super pour mieux comprendre.
Merci
#26par Maiki, le 14 janvier 2012
Utiliser l’élément dl pour un menu.. bizarre et surtout inutile vu que ul ou nav (html5) sont fait pour ça
#27par css3create, le 14 janvier 2012
@Maiki : Tu estimes que
ulest fait pour ça !uldéfini juste une liste non ordonnée, alors quedldéfini une liste de définition, qui est plus sémantique dans ce cas.navest simplement un conteneur, pas une liste.#28par ernest, le 28 janvier 2012
Très bon tuto (très bon site d’une manière générale). L’effet de fente est très sympa et la transition plutôt "smooth". Malheuresement pas utilisable en vrai a cause du bug (si on met la souris tout en bas du menu il y a un effet de tremblement. C’est pourquio je prefere utiliser un effet comme celui là :http://www.alsacreations.com/tuto/l...
Par rapport aux balises je suis pas sur que dl soit très adaptée ici : puisque vous definissez une liste avec un seul item, qui a trois "definitions" différentes qui ne sont même pas des definitions. J’utilise pour tous ce qui est media sociaux une structure
aside>ul>li>a. De ce que j’ai compris aside peut etre utilisée pour ça.
#29par Ch4d, le 20 février 2012
moi je comprend pas parce qu’il ne s’affiche pas alors que j’ai copier le site et fais des retouche bizarre
lien : http://ch4d.kyronet.com/include/men...
#30par Justine, le 19 mars 2012
Il marche sous Firefox ! :)
#31par phenus, le 27 mars 2012
svp pouvez vous publier le code integrale du menu deroulanrt svp cela nous aidera vraiment a comprendre j’attend svp et merci d’avance
#32par sika, le 27 mars 2012
excuze nous mais moi egalement je suis d’accord avec phenus svp publier le code en entier pour la rotation de menu.vous trop fort merci
#33par DAvid, le 18 avril 2012
Moi je l’ai à l’envers :-) c bizarre
#34par Ehmnesia, le 3 mai 2012
J’ai testé, et ça marche pas, j’ai aucun CSS
#35par Yorgo, le 5 mai 2012
Bonjour, comment faites-vous l’ombre au dessus du menu ? j’ai essayé de la reproduire avec un box-shadow mais je n’y arrive pas !
Merci !
#36par Xophis, le 28 juin 2012
Bonjour, lors du :hover sur un dd a la nouvelle couleur n’est pas applique sur 100% de la largeur ! Une idee de l’endroit ou modifier ca ? Merci !
#37par Xophis, le 28 juin 2012
Probleme regle avec un float:right ; sur dd
#38par teste, le 2 août 2012
où est la class btnRot, vous avez oubliez de publier, verifier votre site
#39par Hello, le 11 août 2012
Un petit bug 4 étoiles : survoler très rapidement de haut en bas.
Sinon c’est bien trouver ! :D
#40par biop, le 24 août 2012
salut :)
J’adore cet effet,mais je ne vois pas la partie ou je peux copier le code complet.
Merci d’avance :)
#41par lemonnm, le 28 août 2012
Ne fonctionne pas sous IE... a mon grand regret....
#42par Aiglichon, le 15 septembre 2012
Un lien de téléchargement direct aurait été le bienvenu mais bon :/
Sinon bon site merci.
#43par mimi, le 17 septembre 2012
Sa fonctionne pas !
#44par latchocoolgirl, le 17 septembre 2012
je vais pété un câble ! Je vais m’arracher les cheveux, j’y arrive pas !
#45par Akshobhyia, le 3 octobre 2012
Pour ceux que ca interresse rdv sur ce lien pour les fichier css et Html : https://docs.google.com/folder/d/0B...
#46par rhap’s, le 17 octobre 2012
bonsoir !
super travail merci beaucoup ! je suis fan :d
par contre je comprend pas class="btnRot" il n’est pas dans le css pourtant si on le retir ca ne marche pas...
une explication..?
#47par kiteman, le 23 octobre 2012
Merci beaucoup pour ce tuto !
Pour les besoins de mon site, j’ai dû agrandir la largeur. Du coup les sous-menus (
Je pense que ça se paramètre à cet endroit mais je ne vois pas comment modifier la largeur :
#article16 dd a:hover
background : rgba(255,255,255,0.1) ;
Merci !
#48par Kanda, le 14 février 2013
Bonjour super tuto mais qu`en en et nul comme moi le manque de code et pas facile a reproduire.
#49par benoit, le 8 avril 2013
bonjour, merci pour votre exemple, il fonctionne très bien sauf sur tablette.
#50par Con’Art, le 28 avril 2013
Voilà, je vient de m’essayer au tutoriel et voila mon résultat : http://sbcroc.xooit.fr/index.php
Malheureusement, mon but premier était de placer ce menu de facon a ce que la partie basse, suive le haut de l’écran (un menu flottant) Pourriez vous me conseiller je connais de grosses difficultées ?
#51par Scorpionoir, le 9 mai 2013
bonjour a tous, je ne suis pas debutant en html on va dire que je me debrouille mais des qu’il faut cree un css pour le relier a la page html alors la je suis perdu car dans cette exemple aucune indication donc je ne sais pas exactement ou mettre le code dans la page ou si je doit cree un fichier css pouvez m’aider merci a tous
#52par Scorpionoir, le 9 mai 2013
comment mettre plusieur menu cote a cote ? car je voudrait m’en servir sur la nouvelle version de mon site perso que je suis en train de réaliser merci d’avance a tous(tes) qui pourront m’aider
#53par Haldan, le 23 mai 2013
Bonjour et merci pour ce superbe tuto. Je l’ai mi à profit sur mon site, et l’effet est là.
Je l’ai mis sur toutes les pages. Le soucis, c’est qu’à chaque rechargement de la page en cours ou lorsque l’on charge une nouvelle page, touts les items du menu tournent automatiquement. Est-il donc possible d’empêcher cela, c’est à dire que la class dl.menu reste statique et fasse sa rotation uniquement au focus et non au chargement de la page. Ais-je été clair ?
#54par Haldan, le 24 mai 2013
Pour Scorpionoir
moi j’ai fait comme ça
http://freelance.saintpaul.free.fr
regarde le code
les tables,ça peut encore servir !
par contre, il n’y a qu’un seul masque et une seule ombre css pour les 4 items...
à toi de chercher...
#55par Scorpionoir, le 13 juin 2013
Pour Haldan, merci beaucoup pour ton aide mais apres tous les effort que j’ai fourni j’ai trouver comment mettre plusieur menu cote a cote et c’est la que j’ai eu la rage car la surprise est que chrome n’acceptait pas mes liens donc j’ai tout a refaire avec un autre menu qui fonctionneras cette fois ci du moins je l’espere. bonne fin de journee
#56par Nikos-font, le 27 juin 2013
Bonjour, ton tuto est super !
Cependant je n’arrive pas un cacher la partie souhaitée du "carré".
C’est bien avec les class masque et ombre ??
Merci d’avance, et encore une fois super tuto !
#57par Xude, le 9 juillet 2013
Bonjour, merci pour ce magnifique tutoriel ! Une seule question toutefois : comment accéder au code source ? Je ne trouve pas cette fameuse "partie < head >"... Même en utilisant ctrl+F ça ne donne aucun résultat.
#58par pAcolito, le 14 octobre 2013
Super exemple, très classe. Je viens de le reproduire chez moi et tout marche bien... sauf que tout est à l’envers ! Vous auriez une idée de la provenance du bug ? En tout cas merci !
#59par Delage Thierry, le 26 octobre 2013
Super site je suis vraiment impressionné.
Une question !
Avez vous toutes ces formules css en mémoire, car moi j’apprend cela depuis des Années et je n’arrive pas à mémoriser.
Super votre site
Bravo encore