CSS3トランジションがアニメーション中にZ-インデックスを変更するようです。

私は友人のための簡単な口実のウェブサイトを構築しています。CSS3トランジションがアニメーション中にZ-インデックスを変更するようです。

マウス操作中心の画像の上にはそれを原稿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; 
}

出典

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

ああ、それは複雑になるでしょう。あなたは#LOSOを取り出して#doughnutの兄弟として置く必要があります。その後、＃doughnutをホバリングするときに兄弟セレクターを使ってアニメーションを作ります。 – Duopixel

兄弟セレクタは完璧に動作しました。 – jhchawk

CSS3トランジションがアニメーション中にZ-インデックスを変更するようです。

答えて

関連する問題