CSS3：懸停動畫無法在Firefox上運行

Question

我創建了一個CSS3代碼，該代碼創建了頁面翻轉效果。

使用三個封裝的div標簽，第一個div封裝普通頁面並設置透視圖和轉換樣式。 然后，將包含頁面的第二個div沿X軸旋轉3d一定程度（我需要等軸測透視圖），最后內部div創建具有確定的顏色和尺寸屬性的頁面。

此內部div具有帶動畫屬性的：hover偽指令，該偽指令指示要執行的轉換（在這種情況下，將自身通過Y軸翻轉）。 對於這個目的，還有一個帶有轉換原點和rotate3d屬性的關鍵幀。

由於某種原因，它在Chrome Webkit上無法正常工作，但在Firefox上卻無法工作。 在Chrome瀏覽器中，一旦完成懸停，它將一直翻轉直到頁面完全翻轉，即使由於旋轉鼠標不再在頁面上。 但是，在Firefox中，它會進行較小的翻轉動作，但是即使鼠標仍然停留在頁面上，它也會立即回到初始狀態。

我試過animation-play-state：運行； 在：hover偽指令上，但都不起作用。

有什么幫助嗎？ 我可以確保-moz語法與-webkit中一樣。 謝謝！！

Answer 1

設置.box元素的width和height ，並將其用於懸停而不是.rotateaux元素：

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

.box:hover .rotateaux {

有趣的是，當使用rotate3d Firefox在指定角度> = 180°立即將元素沿錯誤的方向旋轉，忽略了-符號，不確定是什么原因，因此我在示例中使用了Firefox能正確處理的rotateY ：

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