CSS3转换似乎在动画过程中修改z-index

我正在为一个朋友构建一个快速的废话网站，我无法解决这个问题。CSS3转换似乎在动画过程中修改z-index

鼠标放在中央图像将它旋转180deg。我希望它看起来像是从美国国旗下旋转出来的。但是，只要动画一开始，功能区就会出现在旗帜上。

我正在使用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; 
}

来源

2012-01-11 jhchawk

相反动画的所有属性，只是动画的转型：

-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指标，因为它们在移动Safari中非常挑剔。此外，添加浏览器删除供应商前缀时的通用transition声明。

来源

2012-01-11 18:59:58 Duopixel

感谢您的答案，但我试过了，它没有奏效。再次检查网站，我上传了您的建议的文件。谢谢你的提示。 – jhchawk 2012-01-11 19:09:14

啊，这会变得复杂，你需要取出#LOSO并将其作为#doughnut的兄弟，然后在悬停#doughnut时使用兄弟选择器进行动画制作。 – Duopixel 2012-01-11 19:35:58

兄弟姐妹选择工作得很好，谢天谢地。 – jhchawk 2012-01-12 18:46:23

CSS3转换似乎在动画过程中修改z-index

回答

相关问题