Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Les menus

Menu 3D avec attribut HTML data-

Code :

HTML


<ul class="menu_demo">
<li>
<a class=effet-lien href=#>
<span data-title="Rubrique1">
Rubrique1
</span>
</a>
</li>
<li><a class=effet-lien href=#>
<span data-title="Rubrique2">
Rubrique2
</span>
</a>
</li>
<li><a class=effet-lien href=#>
<span data-title="Rubrique3">
Rubrique3
</span>
</a>
</li>
<li><a class=effet-lien href=#>
<span data-title="Rubrique4">
Rubrique4
</span>
</a>
</li>
</ul>


CSS


*{box-sizing:border-box}

.menu_demo{

margin: 4rem auto;
display: flex;
flex-direction: column;
background-color: #7A5FFF;
	
	}

.menu_demo li a{

display: flex;	
justify-content: center;
align-items: center;
color:white;
text-decoration:none;
padding:0 1rem;


	}


@media screen and (min-width: 62.75em){
	
	
.menu_demo{
max-width:600px;
flex-flow: row;
justify-content: center
	
	}
	
.effet-lien{


perspective: 600px
	
	}
    
.effet-lien span{
backface-visibility: hidden;
position: relative;	
transition: transform .2s;
transform-origin: 0 0;
transform-style: preserve-3d
	
	}

.effet-lien span::after{
	
backface-visibility:inherit;
position: absolute;
content: attr(data-title);
left: 0;
top: 0;
transform-origin: 0 0;
transform: translate3d(0,100%,0) rotateX(-90deg)
	
	}
	
	
.effet-lien:hover span{

transform: translate3d(0,0,-30px) rotateX(90deg)
	
	}
	

Support navigateurs :

CSS transforms 3d

HTML dataset

Source, inspiration, ressources :

Plus d'infos sur l'attribut data🔗.

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.