La transición de CSS3 parece modificar el índice Z durante la animación

Estoy creando un sitio web de mierda rápido para un amigo, y no puedo resolver este problema.La transición de CSS3 parece modificar el índice Z durante la animación

Enlace: http://designbyhawk.com/LOSO/

pasar el ratón sobre la imagen central girará 180 grados que. Quiero que parezca que la cinta está girando desde debajo de la bandera estadounidense. Sin embargo, tan pronto como comienza la animación, la cinta aparece sobre la bandera.

Estoy usando la propiedad z-index para mantener la cinta debajo de la bandera, y no estoy seguro de cómo lograr mi efecto deseado.

Gracias a todos y háganme saber cualquier mala práctica en el código.

html:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>LOSO 2012</title> 
     <link href="style.css" type="text/css" rel="stylesheet" media="all"> 
    </head> 

<body> 
    <div id="stripes"> 
     <div id="gradient-top"></div> 

     <div id="doughnut"> 
      <div id="LOSO"> 
       <img src="LOSO-BANNER.png" alt="Loso 2012"> 
      </div> 
     </div> 

     <div id="footer"> 
      <p>&copy; Julien Mothafreakin Cohen 2012</p> 
     </div> 
    </div> 
</body> 
</html>

css:

/*-------------------------- 
RESET 
---------------------------*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video{margin:0; padding:0} 
article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section{display:block} 

table{border-collapse:collapse; border-spacing:0} 
fieldset, img{border:0} 
address, caption, cite, dfn, th, var{font-style:normal; font-weight:normal} 
caption, th{text-align:left} 
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal} 
q:before, q:after{content:''} 
abbr, acronym{border:0} 

/*-----------------------*/ 

#stripes{ 
    background: url('flag-stripes.jpg') repeat; 
    width: 100%; 
    height:1000px; 
    z-index:5; 
} 

#gradient-top{ 
    width: 100%; 
    height: 400px; 
    background: url('gradient-bg.jpg') repeat-x; 
} 

/*-----bgs done----*/ 

#doughnut { /*--- Full credit for this CSS to Seth from stackoverflow: http://stackoverflow.com/users/605698/seth ---*/ 
    border: 50px solid #FFFFFF; 
    border-radius: 200px; 
    border-style:ridge; 
    height:200px; 
    width:200px; 
    margin: 0 auto; 
    position: relative; 
    bottom: 160px; 


       -webkit-transition: all 2s ease-in-out; 
     -moz-transition: all 2s ease-in-out; 
     -o-transition: all 2s ease-in-out; 
     -ms-transition: all 2s ease-in-out; 
} 

    #doughnut:hover{ 

     transform: rotate(180deg); 
     -webkit-transform: rotate(180deg); 
     -moz-transform: rotate(180deg); 
     -o-transform: rotate(180deg); 
     -ms-transform: rotate(180deg); 

     -webkit-transition: all 2s ease-in-out; 
     -moz-transition: all 2s ease-in-out; 
     -o-transition: all 2s ease-in-out; 
     -ms-transition: all 2s ease-in-out; 
    } 

    #LOSO{ 
     background:url('LOSO.png'); 
     width:223px; 
     height:264px; 
     position:relative; 
     bottom:64px; 
     left:-4px 
    } 

     img{ 
      position: relative; 
      right: 364px; 
      top: 175px; 
      z-index: -100 !important; 
     } 

#footer{ 
    width:100%; 
    height:60px; 
    background: #222; 
    opacity:.9; 
    position:relative; 
    top:240px; 
    z-index:10; 

    padding: 10px 0 0 10px; 
    color: white; 
    font-size:15px; 
}

Fuente

2012-01-11 jhchawk

lugar de animar todas las propiedades, simplemente animar la transformación:

-webkit-transition: -wekbit-transform 2s ease-in-out; 
    -moz-transition: -moz-transform 2s ease-in-out; 
    -o-transition: -o-transform 2s ease-in-out; 
    -ms-transition: -ms-transform all 2s ease-in-out; 
    transition: transform all 2s ease-in-out;

El otro único consejo que puedo darle es que no use índices z negativos, ya que son complicados en Mobile Safari. Además, agregue la declaración genérica transition para cuando los navegadores eliminen los prefijos del proveedor.

Fuente

2012-01-11 18:59:58 Duopixel

Gracias por la respuesta, pero lo probé y no funcionó. Verifique el sitio web de nuevo, cargué los archivos con sus sugerencias. Gracias por el consejo. – jhchawk

Ah, eso va a ser complicado, necesitas sacar #LOSO y colocar como hermano de #doughnut, luego usa un selector de hermanos para animar cuando se coloca #doughnut. – Duopixel

Los selectores de hermanos funcionaron perfectamente, gracias hombre. – jhchawk

La transición de CSS3 parece modificar el índice Z durante la animación

Respuesta

Cuestiones relacionadas