Question

我创建了一个创建页面翻转效果的CSS3代码。

使用三个封装的div标签，首先div封装普通页面并设置透视和变换样式。然后包含页面的第二个div通过X轴旋转三度（我需要一个等距透视图），最后内部div创建具有确定颜色和大小属性的页面。

这个内部div有一个：hover伪，带有一个动画属性，表示要进行的转换（在这种情况下，通过Y轴自动翻转）。对于这个purpouse，还有一个带有transformation-origin和rotate3d属性的关键帧。

出于某种原因，这在Chrome webkit上运行得很好，但在Firefox上则不然。在Chrome中，一旦悬停完成，它就会一直翻转直到页面完全翻转，即使由于旋转而鼠标不再出现在页面上也是如此。然而，在Firefox中它会进行一次小的翻转动作，但即使鼠标仍在页面上，它也会立即恢复到初始状态。

我尝试过动画播放状态：跑步;在：hover伪，但都不起作用。

有任何帮助吗？我可以保证-moz语法在-webkit中很好。谢谢！

Answer 1

为width元素设置height和.box，并将其用于悬停而不是.rotateaux元素：

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

.box:hover .rotateaux {

有趣的是，当使用rotate3d时，只要指定一个角度＆gt; = 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);
    }
}

css3：悬停动画不能在firefox上运行

1 个答案: