Question

我目前正在尝试对已经在CSS中设置动画的A元素进行变换（rotateY）。

总结一下：第一个动画发生在用户滚动到这个块时，我有一个“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黑客攻击，我尝试使用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;
 }

悬停时的CSS3转换

1 个答案: