1

私はeカードを作っています。ユーザーがカードをクリックすると、カードが開き、その内容が表示されます。CSSとJavaScriptでこれを作成するにはどうすればよいですか？ここに表示されているように、私は遠近法と回転を使用しています。私がやろうとしているような例を知っているなら、リンクを投稿してください。

例：各色は異なるコンテンツを表します。

4

2 に答える 2

5

これが私が遊んだ解決策です：

  1. 回転アニメーションを行うスタイルを作成します。
  2. toアニメーションの最終結果のスタイルを作成します（基本的に、アニメーションスタイルのセクションと同じです。
  3. ボタンまたはトリガーを作成して、回転スタイルを<div>
  4. アニメーションと同じ期間、JavaScriptでタイムアウトを設定します。
  5. タイムアウトがトリガーされたら、アニメーションスタイルを削除し、最終結果スタイルを追加します

これがjsFiddleの変更です。裏側を機能させるには、いくつかの癖がありました。裏面は、右側の端が前面の左端と揃うように配置する必要があります。次に、表紙の後ろから始まるように裏側を-180度回転させる必要があります。また、アニメーションが中間点に達したら、zインデックスを切り替える必要がありました。

これらすべてをここで説明するのは難しいので、私はブログ投稿全体をそれに捧げました。わかりやすくするために、たくさんのビジュアルを作成しました。

于 2012-05-31T14:06:41.340 に答える
4

使用するより簡単なソリューションもあります。タイマーでz-indexを切り替える代わりに、要素に裏面（-webkit-backface-visibility: hidden）がないことを指定し、黄色のカードを180度反転して、裏面が赤い裏面に接触するようにする必要があります。

このように、黄色と赤のカードを含むコンテナを裏返すだけで済みます。これは、クラスを追加することで実行できます（例class="card opened"）。

これらの変更を加えたサンプルコードは次のとおりです。http： //jsfiddle.net/pYJm6/90/

于 2012-06-16T13:29:27.463 に答える