これがフィドルです:http://jsfiddle.net/DerekL/pwbu4/6/
jQueryを使用しtransform
てCSS3のプロパティを制御し、「フリップカード」効果を作成しています。デモでは、ピンクの四角にカーソルを合わせると、下に反転して裏側が表示されます。問題は、ピンクの四角の位置にカーソルを移動すると、アニメーションが再開されることです。mouseenter
との場合にのみ正方形を反転することになっていmouseleave
ます。つまり、基本的に正方形上を移動すると、フリップはによって行われるため、正方形を離れることさえありませんrotateX
。では、どうすればそれを修正できますか?