2011-07-27 7 views
0

私はHTML + JavaScriptページのフリップエフェクトを作成しています。 私は、テキスト/フォームでこれを使用できるように、私は、これはHTML5のCanvas要素なしでこれを実現したいなどキャンバス要素なしのHTMLでDIVをクリップする

これは私が(WebKitのブラウザ、クロム12を使用してIM)、これまで一緒にハッキングしたものです: JSFIDDLE: Page Flip

プレビュー:私は青い四角形の外に赤い四角形の領域を示していない何をしたいのか

The overlapping region is the one to SHOW

。 私の問題重複領域(パープル領域)のMASKING/CLIPPINGにあります。 マスク(青)div内にページ(赤)divを埋め込み、overflow : hidden に設定しようとしましたが、マスク(青)が回転してページ(赤)も回転し、オフセットあり。

この領域をクリップする方法はありますか?

答えて

0

質問を正しく理解していれば、(赤い)divの上に(青い)divを付けたいですか?それが正しい場合は、z-indexプロパティを両方に追加し、(青色)div z-indexを(赤色)divよりも高くします。

更新:あなたの(赤い)divはすでに絶対的に配置されているので、CSS clipのプロパティを調べる価値があります。唯一の問題は、あなたの(赤い)divが(青い)divの内側にある必要があるということです。

+0

いいえ、私は青の外側の赤い部分を表示したくありません – mrBorna

1

外側/マスキングdivの回転をオフセットするには、内側divの逆回転を計算して実装する必要があります。ここではan example from our Sencha Animator demos

私はあなたが両方のdivに共通の固定回転点を使用するデモのためにコピーした方法であるローマコルテスの元のCSSのページフリップを見てきたと確信しています。

+0

これは、固定パスのページフリップには最適でしょう。私はそれらを共通のポイントで回転させる方法をよく分かりません。 – mrBorna

+0

ああ、そうです。それは些細なことではない...私を麺にさせて –

関連する問題