CSS3过渡似乎会在动画期间修改z-index

Question

CSS3过渡似乎会在动画期间修改z-index

htmlcsscss-transitions

5

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

链接：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;
}

- jhchawk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

不要对所有属性进行动画处理，只需对转换进行动画处理：

   -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-index，因为在移动版Safari中它们很容易出现问题。此外，当浏览器删除供应商前缀时，请添加通用的transition声明。