モーダルを使用していくつかのオプションを表示する代わりに、いくつかの 3D 変換を使用して、ビューの「背面」にいくつかの入力を表示する「反転」モーションを作成しようとしています。
機能と問題を示すコードペンを作成しました。
問題は、div をひっくり返すと、後ろ向きのフォームの下半分がクリックできず、その上に見えない要素があるように見えることです。編集できないのは正確に下の 50% であるため、ローテーションの方法が間違っていると推測しています。
モーダルを使用していくつかのオプションを表示する代わりに、いくつかの 3D 変換を使用して、ビューの「背面」にいくつかの入力を表示する「反転」モーションを作成しようとしています。
機能と問題を示すコードペンを作成しました。
問題は、div をひっくり返すと、後ろ向きのフォームの下半分がクリックできず、その上に見えない要素があるように見えることです。編集できないのは正確に下の 50% であるため、ローテーションの方法が間違っていると推測しています。
あなたの例を修正できました: http://codepen.io/MikeFielden/pen/haHrG
私がやったのは、あなたrotateX(180deg)
をに変更するrotateX(-180deg)
ことだけでした。なぜこれを行うのかについては、私には言えません。おそらくブラウザのバグ?