1

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

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

这个内部 div 有一个 :hover 伪动画属性，它指示要进行的转换（在这种情况下，通过 Y 轴翻转自身）。为了这个目的，还有一个带有转换原点和 rotate3d 属性的关键帧。

出于某种原因，这在 Chrome webkit 上运行良好，但在 Firefox 上却不行。在 Chrome 中，一旦悬停完成，它会一直翻转直到页面完全翻转，即使由于旋转而鼠标不再在页面上。然而，在 Firefox 中，它会进行一个小的翻转动作，但会立即回到其初始状态，即使鼠标仍在页面上。

我试过动画播放状态：运行；在 :hover 伪上，但都不起作用。

有什么帮助吗？我可以保证 -moz 语法和 -webkit 一样好。谢谢！！

4

1 回答 1

1

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

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

.box:hover .rotateaux {

有趣的是，当使用rotate3dFirefox 时，只要指定角度 >= 就会将元素旋转到错误的方向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);
    }
}
于 2013-06-30T16:56:56.957 回答