[Sam L]

Попробовал реализовать flip эффект на чистом сss - не работает в опере, перепробовал разные варианты, остановился на rotate3di.js.

Но вот загвоздка - если использовать unflip или toggle - обратный поворот не срабатывает в опере (т.е. в одну сторону нормально вращается, в другую - просто hide/show).

HTML вот такой:

<ul id="Sparks" class="nav-list-example">
        <li>
            <div class="front"><img src="./img/Sparks01.jpg"/></div>
            <div class="back"><img src="./img/Sparks00.jpg"/></div>
        </li>
</ul>

СSS:

.nav-list-example {
width: 100%;
margin: 0;
padding: 0;
}

.nav-list-example div {
width:100%;
float: left;
position: relative;
border: 1px solid #000;
}

.nav-list-example li div {
top:0;
left:0;
width: 100%;
overflow: hidden;
background: transparent;
position: absolute;
}

.nav-list-example li div.back {
left: -999em;
background: transparent;
}

Скрипт:

$(document).ready(function () {
    $('.nav-list-example li div.back').hide().css('left', 0);

    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();

        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }

    $('.nav-list-example li').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 750, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
        }
    );
});

В опере, мозилле, работает, если не использовать unflip или toggle, но в хроме и сафари после первого переворота - второй и последующий - двойные (картинка дважды вращается и показывается правильная сторона).... Скрипт меняю вот так:

$(document).ready(function () {
    $('.nav-list-example li div.back').hide().css('left', 0);

    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();

        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }

    function mySideChangeBack(front) {
        if (front) {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();

        } else {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();
        }
    }

    $('.nav-list-example li').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 750, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('flip', 1000, {sideChange: mySideChangeBack});
        }
    );
});

Подскажите, что изменить? ну или скрипт, который кроссбраузерный...