Menu – Hover 3D

Menu – Hover 3D

Neste tutorial vamos fazer um menu com efeito 3D com css quando passamos o mouse ele gira com efeiro 3D.

Vamos Adicionar o Html:

    <nav class="bg menu-3d">
        
        <a href="#"><span data-hover="Home">Home</span></a>
        <a href="#"><span data-hover="Html">Html</span></a>
        <a href="#"><span data-hover="Css3">Css3</span></a>
        <a href="#"><span data-hover="jQuery">jQuery</span></a>
        <a href="#"><span data-hover="WordPress">WordPress</span></a>
    
    </nav>

Vamos Adicionar o Css:

nav.bg {
    
    width:100%;
    float:left; 
    text-align:center;  
    background-color: #2a66a6;

}

nav a {

	position: relative;
	display: inline-flex;
	margin: 16px 20px;
	outline: none;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.3em;

}

nav a:hover,
nav a:focus {

	outline: none;


}

/*Menu 3D*/

.menu-3d a {

	line-height: 40px;
	overflow: hidden;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px; 
	border-radius: 6px;
}

.menu-3d a span {
	position: relative;
	display: inline-block;
	padding: 0 14px;
    background: rgb(48,115,187);   
    background: linear-gradient(90deg, rgba(48,115,187,1) 0%, rgba(29,77,129,1) 49%);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.menu-3d a span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0965a0;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

.menu-3d a:hover span,
.menu-3d a:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.menu-3d a:hover span::before,
.menu-3d a:focus span::before {
    background: rgb(60,143,233);
    background: linear-gradient(90deg, rgba(60,143,233,1) 0%, rgba(42,109,182,1) 49%);
}

Veja o Resultado !

Baixar Código Veja Funcionando