divを回転させるときに消えないようにする方法（90度）

Question

私のウェブページにはdivがあります。そのdivには、divが反転された（フリップされた）ことをシミュレートする "アニメーション"があります。

<div id="wrapper"> 
    <div id="content"> 
     Some content 
    </div> 
</div> 

"wrapper" divをjQuery plugin transitでローテートします。プラグインはCSSを適用するだけです。

transform: rotateY(180deg); 

のdivがrotateY(90deg)上にあるとき、私は#content divの中にいくつかの新しいコンテンツをロードする必要があります。これは非常に時間がかかりますが、アニメーションではdivがその時間の前に隠れていることがわかります。

SEE DEMO FIDDLE （私はここで実際のコンテンツの読み込みを持っていないことに注意）

はときrotateY(90)ダイビングは完全に消えていないと、それは可能ですか？

残念ながら、HTML自体が生成されているため、HTML自体は制御できません。

Answer 1

それに厚みを加えるようにしてください。このような何かを参照してください：want to show the thickness of an element while it rotate

が、CSSのアニメーション作り： 0％：変換を：回転Y（は0deg）。 50％：transform：rotateY（90deg）; 100％：transform：rotateY（180deg）;

これが役に立ちます。

jQueryプラグインにcssファイルがあるか確認してください。

また、基本的なCSSとjQueryを使用してこれを行うこともできます。

Answer 2

ちょうど2つの側面を作成し、DIVの内容を変更しないでください：

<div id="wrapper"> 
    <div class="side-a"> 
     Some content 
    </div> 
    <div class="side-b"> 
     Some content 
    </div> 
</div> 

はCSS：

#wrapper{ 
    transition: all 2s; 
    position: relative; 
} 
#wrapper.flip{ 
    transform: rotateY(180deg); 
} 
.side-a{ 
    z-index: 1; 
    opacity: 1; 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; //half the transition time of the wrapper 
} 
.side-b{ 
    z-index: 0; 
    opacity: 0; 
    transform: rotateY(180deg); 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; 
} 
.flip side-a{ 
    z-index: 0; 
    opacity: 0; 
} 
.flip side-b{ 
    z-index: 1; 
    opacity: 1; 
} 

Javascriptを：

$('.next-slide').click(function(){ 
    $('#wrapper').addClass('flip'); 
}); 
$('.prev-slide').click(function(){ 
    $('#wrapper').removeClass('flip'); 
});