CSS3 переход, кажется, изменяет z-index во время анимации - PullRequest
Новая
       9

CSS3 переход, кажется, изменяет z-index во время анимации

5 голосов
/ 11 января 2012

Я создаю быстрый сайт для друга, и я не могу понять эту проблему.

Ссылка: 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;
}

1 Ответ

5 голосов
/ 11 января 2012

Вместо анимации всех свойств, просто анимируйте преобразование: 

   -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 для случаев, когда браузеры сбрасывают префиксы поставщиков.

...