html - 悬停时的 CSS3 变换

Question

我目前正在尝试对 A 元素进行变换 (rotateY)，该元素已在 CSS 中设置了动画。

总结:第一个动画发生在用户滚动到这个 block 时，我有一个“show”类，它启动一个 css 动画。这很好用。第二次，当 .show 元素悬停时，我让他旋转。如您所见，第二个动画有问题。它闪烁，没有按预期工作。

这是 CSS(Sass/Compass)部分:

li
    width: 23%
    float: left
    background: top center url('../img/bgHexa.png') no-repeat
    &+li
        margin-left: 2.5%

    & > a
        background: url('../img/pictosHome.png') 65px 60px no-repeat
        width: 100%
        display: block
        height: 220px
        opacity: 0
        position: relative
        top: 90px
        +transform(rotateY(135deg))
        +transition(all 0.6s ease-in-out)
        &.show
            top: 0
            opacity: 1
            +transform(rotateY(0))
            &.hover             
                +transform(rotateY(180deg))

JS部分:

if( app.toTop >= $('#prezComp ul').offset().top- app.height/2){

            var nb = 0;
            var int = setInterval( function(){

                var el = $('#prezComp .picto').eq(nb);
                el.addClass('show');
                nb++;
                if( nb > 4) {
                    clearInterval(int);
            }
            }, 300);

        }   

我尝试了很多 HTML hack，我尝试了 JS，它并没有更好地工作......

我做错了什么？

Answer 1

此时鼠标悬停没有发生，试试这个代码:

CSS:

#prezComp li {   //style.css:558
width: 23%;
float: left;
position: relative;
z-index: 100000;
background: top center url("../img/bgHexa.png") no-repeat;
 }