0

Webkit 変換を使用してカード反転効果を作成しています。あるセクションでは好きなように動作させています。ここでは、DIV が中心軸を中心に回転し、カードがひっくり返ったように見えます。

これと同じ効果をページ遷移に追加したいと思います。同じ CSS と HTML 構造を使用していますが、この場合、中心軸を中心に回転する効果が得られません。

代わりに、オブジェクトの中心ではなく左側に固定された y 軸に沿って変換が回転しているように見えます (したがって、カードをめくるというよりも、ドアが開いているように見えます)。

仕様を読んでいますが、回転軸の位置を制御するプロパティがわかりません。フリップを機能させるには、これに何を追加または変更する必要がありますか?

html構造:

<div id="frontbackwrapper">
    <div id="front"></div>
    <div id="back"></div>
</div>

および css (効果を開始するために jQuery を介して .flip が追加されています)

#frontbackwrapper {
    position: absolute;
    -webkit-perspective: 1000;
    -webkit-transition-duration: 1s;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1s;
}
#frontbackwrapper.flip {
    -webkit-transform: rotateY(180deg);
}

#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
    -webkit-transform: rotateY(180deg);
    -webkit-transition: 1s;
}
#front, #back {
    position: absolute;
    -webkit-backface-visibility: hidden;  
}
#back {
    -webkit-transform: rotateY(180deg);
}
4

1 に答える 1

1

ラッパーでこれを試してください 

-webkit-transform-origin: 50% 0 0;

ただし、幅を明示的に設定する必要がある場合とない場合があります。

于 2011-08-01T22:58:55.850 に答える