1

ページめくり効果を作成する CSS3 コードを作成しました。

カプセル化された 3 つの div タグを使用して、最初に div がプレーン ページをカプセル化し、パースペクティブと変換スタイルを設定します。ページを含む 2 番目の div は、X 軸を介してある程度回転し (アイソメトリック パースペクティブが必要です)、最後に内側の div が決定された色とサイズの属性を持つページを作成します。

この内側の div には、実行する変換 (この場合、Y 軸を介して自身を反転) を示すアニメーション プロパティを持つ :hover 疑似があります。この目的のために、transformation-origin と rotate3d 属性を持つキーフレームもあります。

何らかの理由で、これは Chrome Webkit ではうまく機能しますが、Firefox では機能しません。Chrome では、ホバーが完了すると、回転のためにマウスがページ上になくなった場合でも、ページが完全に裏返されるまで反転し続けます。ただし、Firefox では、マウスがまだページ上にある場合でも、小さな反転動作を行いますが、すぐに初期状態に戻ります。

私は animation-play-state: running; で試しました。:hover 擬似で、どちらも機能しません。

何か助けはありますか？-moz 構文が -webkit と同様に優れていることは保証できます。ありがとう！！

4

1 に答える 1

1

要素に と を設定widthしheight、.box要素の代わりにホバリングに使用し.rotateauxます。

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

.box:hover .rotateaux {

興味深いことに、rotate3dFirefox を使用すると、角度 >= を指定するとすぐに要素が間違った方向に回転し、符号は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);
    }
}
于 2013-06-30T16:56:56.957 に答える