CSS3 переход кажется изменяет z-index во время анимации

Я делаю быстрый фиговый сайт для друга, и я не могу решить эту проблему.

Ссылка: http://designbyhawk.com/LOSO/

При наведении курсора на центральное изображение оно поворачивается на 180 градусов. Я хочу, чтобы это выглядело так, будто лента вращается из-под американского флага. Однако, как только начинается анимация, лента появляется над флагом.

Я использую свойство z-index, чтобы лента оставалась под флагом, и я не уверен, как добиться желаемого эффекта.

Спасибо всем, и пожалуйста, дайте мне знать о любой плохой практике в коде.

html:

    
        
        
    


    

        


        

            

                
            
        

        

            
© Julien Mothafreakin Cohen 2012
        
    

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;
}