CSS3转换似乎会在动画过程中修改z索引

我正在为一个朋友建立一个快速的狗屁网站，但我无法解决这个问题。

链接：http://designbyhawk.com/LOSO/

将鼠标悬停在中心图像上将使其旋转180度。我想让它看起来像是从美国国旗下旋转出来的缎带。但是，动画一开始，功能区就会出现在标志上方。

我正在使用z-index属性将功能区保持在标志下，并且我不确定如何实现我想要的效果。

谢谢大家，请让我知道代码中的任何不良做法。

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

不设置所有属性的动画，只设置转换的动画：

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

我能给你的唯一其他提示是不要使用负z索引，因为它们在Mobile Safari中很挑剔。此外，当浏览器删除供应商前缀时，添加通用transition声明。

相关内容

最新更新

热门标签：