5

I'm building a quick bullshit website for a friend, and I can't figure this problem out.

Link: http://designbyhawk.com/LOSO/

Mousing over the central image will rotate it 180deg. I want it to look like the ribbon is rotating out from under the american flag. However, as soon as the animation starts, the ribbon appears over the flag.

I'm using the z-index property to keep the ribbon under the flag, and I'm not sure how to achieve my desired effect.

Thanks everyone, and please let me know of any bad practices in the code.

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;
}
Improve this question

1 Answer 1

Reset to default
5

Instead of animating all properties, just animate the transformation:

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

The only other tip I can give you is to not use negative z-indexes, as they are finicky in Mobile Safari. Also, add the generic transition declaration for when browsers drop vendor prefixes.

Improve this answer
2
  • Thanks for the answer but I tried it and it didn't work. Check the website again, I uploaded the files with your suggestions. Thanks for the tip.
    – jhchawk
    Commented Jan 11, 2012 at 19:09
  • 1
    Ah, that's going to be complicated, you need to take out #LOSO and place is as a sibling of #doughnut, then use a sibling selector to animate when hovering #doughnut.
    – methodofaction
    Commented Jan 11, 2012 at 19:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.