0

HTML+Javascript ページ フリップ効果に取り組んでいます。テキスト/フォームなどでこれを使用できるように、HTML5 Canvas 要素なしでこれを実現したいと考えています。

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

プレビュー:

オーバーラップ領域は、SHOWするものです

私がやりたいのは、青い四角形の外側にある赤い四角形の領域を表示しないことです。私の問題は、重なり合う領域（紫色の領域）のマスキング/クリッピングにあります。マスク (青) の div 内にページ (赤) の div を埋め込んで設定しようとしましたoverflow : hidden が、問題はマスク (青) が回転し、ページ (赤) も回転し、オフセットを使用して計算を修正する場所がありませんでした。 .

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

4

2 に答える 2

1

外側/マスキング div の回転をオフセットするには、内側 div のカウンター回転を計算して実装する必要があります。Sencha Animator デモの例を次に示します。

Roman Cortes の元の CSS pageflip を見たことがあると思います。このメソッドは、両方の div に共通の固定回転ポイントを使用するデモ用にコピーしました。

于 2011-07-27T17:57:53.007 に答える
0

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

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

于 2011-07-27T16:31:06.710 に答える