Ver Mensaje Individual
  #5 (permalink)  
Antiguo 17/06/2013, 09:58
ricardo86
 
Fecha de Ingreso: junio-2013
Mensajes: 6
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Problema con z-index

Ya lo intente comablck pero no queda lo mismo que usando jquery para redimensionar el background ypzin todavia no lo tengo publicado el sitio ya que lo que estoy haciendo es para la intranet de la empresa; me he dado cuenta que el ejemplo que estoy adaptando a las necesidades tiene su propio css, el cual creo que ese me esta causando el problema.
Lo adjunto:
Código:
*{margin:0;padding:0;}

a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

body{
font-family:Helvetica;
}



body>*{
/*-webkit-backface-visibility:visible;
background:#transparent;
-webkit-box-sizing:border-box;*/
display:none;
position:absolute;
left:0;
width:100%;
height:100%;
/*-webkit-transform:translate3d(0,0,0) rotate(0) scale(1);*/
min-height:420px!important;}


body>.current{display:block!important;}
.in,.out{-webkit-animation-timing-function:ease-in-out;-webkit-animation-duration:350ms;}
.slide.in{-webkit-animation-name:slideinfromright;}
.slide.out{-webkit-animation-name:slideouttoleft;}
.slide.in.reverse{-webkit-animation-name:slideinfromleft;}
.slide.out.reverse{-webkit-animation-name:slideouttoright;}
@-webkit-keyframes slideinfromright{from{-webkit-transform:translateX(100%);}to{-webkit-transform:translateX(0);}}
@-webkit-keyframes slideinfromleft{from{-webkit-transform:translateX(-100%);}to{-webkit-transform:translateX(0);}}
@-webkit-keyframes slideouttoleft{from{-webkit-transform:translateX(0);}to{-webkit-transform:translateX(-100%);}}
@-webkit-keyframes slideouttoright{from{-webkit-transform:translateX(0);}to{-webkit-transform:translateX(100%);}}
@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadeout{from{opacity:1;}to{opacity:0;}}
.fade.in{z-index:10;-webkit-animation-name:fadein;}
.fade.out{z-index:0;}.dissolve.in{-webkit-animation-name:fadein;}
.dissolve.out{-webkit-animation-name:fadeout;}.flip{-webkit-animation-duration:.65s;}
.flip.in{-webkit-animation-name:flipinfromleft;}.flip.out{-webkit-animation-name:flipouttoleft;}
.flip.in.reverse{-webkit-animation-name:flipinfromright;}.flip.out.reverse{-webkit-animation-name:flipouttoright;}
@-webkit-keyframes flipinfromright{from{-webkit-transform:rotateY(-180deg) scale(.8);}to{-webkit-transform:rotateY(0) scale(1);}}
@-webkit-keyframes flipinfromleft{from{-webkit-transform:rotateY(180deg) scale(.8);}to{-webkit-transform:rotateY(0) scale(1);}}
@-webkit-keyframes flipouttoleft{from{-webkit-transform:rotateY(0) scale(1);}to{-webkit-transform:rotateY(-180deg) scale(.8);}}
@-webkit-keyframes flipouttoright{from{-webkit-transform:rotateY(0) scale(1);}to{-webkit-transform:rotateY(180deg) scale(.8);}}
.slideup.in{-webkit-animation-name:slideup;z-index:10;}
.slideup.out{-webkit-animation-name:dontmove;z-index:0;}
.slideup.out.reverse{z-index:10;-webkit-animation-name:slidedown;}
.slideup.in.reverse{z-index:0;-webkit-animation-name:dontmove;}
@-webkit-keyframes slideup{from{-webkit-transform:translateY(100%);}to{-webkit-transform:translateY(0);}}
@-webkit-keyframes slidedown{from{-webkit-transform:translateY(0);}to{-webkit-transform:translateY(100%);}}
@-webkit-keyframes dontmove{from{opacity:1;}to{opacity:1;}}
.swap{-webkit-transform:perspective(800);-webkit-animation-duration:.7s;}
.swap.out{-webkit-animation-name:swapouttoleft;}
.swap.in{-webkit-animation-name:swapinfromright;}
.swap.out.reverse{-webkit-animation-name:swapouttoright;}
.swap.in.reverse{-webkit-animation-name:swapinfromleft;}
@-webkit-keyframes swapouttoright{0%{-webkit-transform:translate3d(0px,0px,0px) rotateY(0deg);-webkit-animation-timing-function:ease-in-out;}50%{-webkit-transform:translate3d(-180px,0px,-400px) rotateY(20deg);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:translate3d(0px,0px,-800px) rotateY(70deg);}}
@-webkit-keyframes swapouttoleft{0%{-webkit-transform:translate3d(0px,0px,0px) rotateY(0deg);-webkit-animation-timing-function:ease-in-out;}50%{-webkit-transform:translate3d(180px,0px,-400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:translate3d(0px,0px,-800px) rotateY(-70deg);}}
@-webkit-keyframes swapinfromright{0%{-webkit-transform:translate3d(0px,0px,-800px) rotateY(70deg);-webkit-animation-timing-function:ease-out;}50%{-webkit-transform:translate3d(-180px,0px,-400px) rotateY(20deg);-webkit-animation-timing-function:ease-in-out;}100%{-webkit-transform:translate3d(0px,0px,0px) rotateY(0deg);}}
@-webkit-keyframes swapinfromleft{0%{-webkit-transform:translate3d(0px,0px,-800px) rotateY(-70deg);-webkit-animation-timing-function:ease-out;}50%{-webkit-transform:translate3d(180px,0px,-400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in-out;}100%{-webkit-transform:translate3d(0px,0px,0px) rotateY(0deg);}}
.cube{-webkit-animation-duration:.55s;}.cube.in{-webkit-animation-name:cubeinfromright;-webkit-transform-origin:0 50%;}
.cube.out{-webkit-animation-name:cubeouttoleft;-webkit-transform-origin:100% 50%;}
.cube.in.reverse{-webkit-animation-name:cubeinfromleft;-webkit-transform-origin:100% 50%;}
.cube.out.reverse{-webkit-animation-name:cubeouttoright;-webkit-transform-origin:0 50%;}
@-webkit-keyframes cubeinfromleft{from{-webkit-transform:rotateY(-90deg) translateZ(320px);opacity:.5;}to{-webkit-transform:rotateY(0deg) translateZ(0);opacity:1;}}
@-webkit-keyframes cubeouttoright{from{-webkit-transform:rotateY(0deg) translateX(0);opacity:1;}to{-webkit-transform:rotateY(90deg) translateZ(320px);opacity:.5;}}
@-webkit-keyframes cubeinfromright{from{-webkit-transform:rotateY(90deg) translateZ(320px);opacity:.5;}to{-webkit-transform:rotateY(0deg) translateZ(0);opacity:1;}}
@-webkit-keyframes cubeouttoleft{from{-webkit-transform:rotateY(0deg) translateZ(0);opacity:1;}to{-webkit-transform:rotateY(-90deg) translateZ(320px);opacity:.5;}}
.pop{-webkit-transform-origin:50% 50%;}
.pop.in{-webkit-animation-name:popin;z-index:10;}
.pop.out.reverse{-webkit-animation-name:popout;z-index:10;}
.pop.in.reverse{z-index:0;-webkit-animation-name:dontmove;}
@-webkit-keyframes popin{from{-webkit-transform:scale(.2);opacity:0;}to{-webkit-transform:scale(1);opacity:1;}}
@-webkit-keyframes popout{from{-webkit-transform:scale(1);opacity:1;}to{-webkit-transform:scale(.2);opacity:0;}}