Chuyển đổi CSS3 dường như sửa đổi chỉ mục z trong hoạt ảnh

Tôi đang xây dựng trang web nhảm nhí nhanh chóng cho một người bạn và tôi không thể tìm ra vấn đề này.Chuyển đổi CSS3 dường như sửa đổi chỉ mục z trong hoạt ảnh

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

Mousing lên ảnh trung ương sẽ xoay nó 180deg. Tôi muốn nó trông giống như ruy-băng đang quay ra từ dưới cờ Mỹ. Tuy nhiên, ngay khi hoạt ảnh bắt đầu, ruy-băng sẽ xuất hiện trên cờ.

Tôi đang sử dụng thuộc tính z-index để giữ ruy băng bên dưới cờ và tôi không chắc chắn cách đạt được hiệu quả mong muốn của mình.

Xin cảm ơn tất cả mọi người và vui lòng cho tôi biết về bất kỳ hành vi xấu nào trong mã.

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

Nguồn

2012-01-11 jhchawk

Thay vì hiệu ứng động tất cả các tài sản, chỉ animate chuyển đổi:

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

Các chỉ tip khác tôi có thể cung cấp cho bạn là không sử dụng chỉ mục z âm, vì chúng rất khó trong Mobile Safari. Ngoài ra, hãy thêm tuyên bố chung của transition khi trình duyệt thả tiền tố của nhà cung cấp.

Nguồn

2012-01-11 18:59:58 Duopixel

Cảm ơn câu trả lời nhưng tôi đã thử nó và nó không hoạt động. Kiểm tra lại trang web, tôi đã tải lên các tệp với đề xuất của bạn. Cảm ơn vì tiền hỗ trợ. – jhchawk

Ah, điều đó sẽ phức tạp, bạn cần phải đưa ra #LOSO và địa điểm là anh chị em của #doughnut, sau đó sử dụng bộ chọn anh chị em để tạo hoạt ảnh khi di chuột #doughnut. – Duopixel

Bộ chọn chị em làm việc hoàn hảo, cảm ơn người đàn ông. – jhchawk

Chuyển đổi CSS3 dường như sửa đổi chỉ mục z trong hoạt ảnh

Trả lời

Các vấn đề liên quan