Webkit 3D変換で回転軸を制御する

Question

Webkit変換を使用してカードフリップ効果を作成しています。 1つのセクションで好きなように動作しています。そこでは、その中心軸を中心に回転するDIVがあり、反転しているカードの外観を与えています。

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

代わりに、トランスフォームが中心ではなくオブジェクトの左側に固定されたy軸に沿って回転しているように見えます（カードが反転するのではなく、ドアの開口部のように見えます）。

私は仕様を読んできましたが、どのプロパティが回転軸の位置を制御しているのか分かりません。フリップが働くためには、これを追加または変更する必要がありますか？

HTML構造：

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

とCSS（.flipが効果を開始するためにjQueryを経由して追加されている）

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

Answer 1

があなたのラッパーでこれを試してみてください

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

ものの幅を明示的に設定する必要はありません。