css3: анимация hover не работает на firefox

Question

Я создал код CSS3, который создал эффект переворота страницы.

С тремя инкапсулированными тегами Div, сначала div инкапсулирует обычную страницу и устанавливает перспективу и стиль преобразования. Второй div, содержащий страницу, затем поворачивается3 по оси X на несколько градусов (мне нужна изометрическая перспектива), и, наконец, внутренний div создает страницу с определенными атрибутами цвета и размера.

Этот внутренний div имеет: hover pseudo с свойством анимации, которое указывает на преобразование, которое нужно сделать (в этом случае, переворачивая себя по оси Y). Для этой пурпусы есть также ключевой кадр с атрибутами transform-origin и rotate3d.

По какой-то причине это работает аккуратно в Chrome Webkit, но не в Firefox. В Chrome после того, как наведите курсор, он продолжает переворачиваться, пока страница полностью не перевернется, даже когда мышь больше не находится на странице из-за поворота. В Firefox, однако, он делает небольшое движение с переворотом, но сразу же возвращается в исходное состояние, даже если мышь все еще находится на странице.

Я пробовал с анимацией-play-state: running; на псевдовиде: hover, но не работает.

Любая помощь? Я могу заверить, что синтаксис -moz хорош, как в -webkit. Благодаря!!

Answer 1

Набор width и height для .box элемента и использовать его для зависания вместо .rotateaux элемента:

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

.box:hover .rotateaux { 

Интересно при использовании rotate3d Firefox, вращает элемент в неправильном направлении, как только указать угол> = 180°, игнорируя знак -, не уверен, в чем причина этого, поэтому я использовал rotateY в моем примере, который Firefox правильно обрабатывает:

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); 
    } 
}