css3 :hover animation not working on firefox

Question

I've created a CSS3 code that created a page flipping effect.

With three encapsulated div tags, first a div encapsulates the plain page and sets the perspective and transform-style. The second div which contains the page is then rotated3d through the X-axis some degrees (I need an isometric perspective) and finally the inner div creates the page with a determinated color and size attributes.

This inner div has a :hover pseudo with an animation property, which indicates the transformation to do (in this case, flipping itself through the Y-axis). For this purpouse there's as well a keyframe with a transformation-origin and the rotate3d attributes.

For some reason this works neat on Chrome webkit, but not on Firefox. In Chrome once the hover is done it keeps flipping until the page is totally turn over, even when the mouse is not anymore on the page due to the rotation. In Firefox however it makes a small flip movement, but goes back to its initial state inmediately, even if the mouse is still on the page.

I've tried with animation-play-state: running; on the :hover pseudo, but neither works.

Any help? I can assure the -moz syntax is good as in -webkit. Thanks!!

There you go. I found on further testing that moving the outer div some px to the right makes it work almost everytime, but not always. Still, it looks that running it on Firefox is much slower and less smooth than on Chrome. — Alex

ndm ndm · Accepted Answer · 2013-06-30T16:56:56

Set width and height for the .box element and use it for hovering instead of the .rotateaux element:

.box {
    position: relative;
    width: 50px; 
    height: 90px;
    ...
 }

.box:hover .rotateaux {

Interestingly when using rotate3d Firefox rotates the element in the wrong direction as soon as specifying an angle >= 180°, ignoring the - sign, not sure what's the cause of this, so I've used rotateY in my example which Firefox handles correctly:

http://jsfiddle.net/V7Chp/

<div class="book">
    <div class="box">
        <div class="rotateaux"></div>
    </div>
</div>

.book {
    position: absolute;
    z-index: -1;
    top: 80px;
    right: 300px;

    -webkit-perspective: 300px;
       -moz-perspective: 300px;
            perspective: 300px;

    -webkit-perspective-origin: 0% 50%;
       -moz-perspective-origin: 0% 50%;
            perspective-origin: 0% 50%;
}

.box {
    position: relative;
    width: 50px; 
    height: 90px;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-transform: rotateX(70deg);
       -moz-transform: rotateX(70deg);
            transform: rotateX(70deg);
}
.rotateaux {
    position: relative;
    background: green;
    width: 50px; 
    height: 90px;

    -webkit-transform-origin: 0% 50%;
       -moz-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
}

.box:hover .rotateaux {
    -webkit-animation: example 1.75s ease-in-out 0s infinite alternate;
       -moz-animation: example 1.75s ease-in-out 0s infinite alternate;
            animation: example 1.75s ease-in-out 0s infinite alternate;
}

@-webkit-keyframes example {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-180deg);
    }
}

@-moz-keyframes example {
    from {
        -moz-transform: rotateY(0deg);
             transform: rotateY(-180deg);
    }
    to {
        -moz-transform: rotateY(0deg);
             transform: rotateY(-180deg);
    }
}

@keyframes example {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(-180deg);
    }
}

css3 :hover animation not working on firefox

1 Answers