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 :
Source, inspiration, ressources :
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.