Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Menu 3d no funciona

Estas en el tema de Menu 3d no funciona en el foro de CSS en Foros del Web. Hola amigos..tengo este menu 3d pero no funciona el enlace para redireccionar, espero me ayuden!! HTML Código: <nav class="mainNav"> <ul> <li><a href="https://www.google.com.ar/" data-title="MENU1">MENU1</a></li> <li><a href="https://www.google.com.ar/" ...
  #1 (permalink)  
Antiguo 21/12/2017, 16:29
 
Fecha de Ingreso: febrero-2016
Mensajes: 28
Antigüedad: 8 años, 3 meses
Puntos: 1
Menu 3d no funciona

Hola amigos..tengo este menu 3d pero no funciona el enlace para redireccionar, espero me ayuden!!

HTML
Código:
<nav class="mainNav">
    <ul>
        <li><a href="https://www.google.com.ar/" data-title="MENU1">MENU1</a></li>
        <li><a href="https://www.google.com.ar/" data-title="MENU2">MENU2</a></li>

    </ul>
</nav>
CSS

Código:
.mainNav {
    float: left;
    transform: perspective(500px);
    transform-style: preserve-3d;
}
.mainNav ul {
  list-style: none;
  padding: 0;
}
.mainNav li {
    display: inline-block;

}
.mainNav a {
    background-color: RED;
  border: 1px solid WHITE;
    backface-visibility: hidden;
    color: white;
    display: block;
    font: bold 1em/3 sans-serif;
    padding: 0 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    width: 6em;
   

 
}
.mainNav a:after {
    background-color: RED;
  border: 1px solid white;
    color: white;
  font-size: 15px;
    content: attr(data-title);
    height: 100%;
    left: 0;
    line-height: 3;
    position: absolute;
    top: 100%;
    transform: rotateX(-90deg);
    transform-origin: 0 0;
    width: 100%;
   
 

}
.mainNav a:before {
    bottom: 0;
    content: '';
    height: 3em;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: 0 0;
    width: 3em;
}
.mainNav li:nth-child(-n+2) a:before {
    transform: rotateY(90deg) translateZ(3em);
  
}
.mainNav li:nth-child(n+3) a:before {
    left: 0;
    right: auto;
    transform: rotateY(90deg);
}
.mainNav li:hover a {
    transform: rotateX(90deg) translateY(-1.5em) translateZ(1.5em);

}
.mainNav .current:hover a {
   transform: rotateX(0deg) translateY(0) translateZ(0);
  
}
  #2 (permalink)  
Antiguo 26/12/2017, 08:44
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 7 meses
Puntos: 39
Respuesta: Menu 3d no funciona

Cambia en el selector del enlace la visibilidad por detrás a "visible":

Código CSS:
Ver original
  1. .mainNav a { backface-visibility: hidden; }
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:10.