0

javascript / html / cssを使用してカードのデッキを作成しました-カードを配ったり、裏返したりするためにcssアニメーションで遊んでいます。ここにサイトhttp://dalydd.com/projects/deckofcards.htmlがあります（表示してください）私はウェブキットのプレフィックスのみを使用しているので、クロムで）

ディールカードボタンを押すと、2つの異なるセクションにカードが配られます。1つは（コンピュータープレーヤー）用、もう1つは個々のプレーヤー用です）アニメーションのディールが終了すると、プレーヤー部分のカードを裏返して、カードの裏側や裏側のdivではなく実際のカードが私のhtmlとcssです

 <section class="wrapper" style="top: 1px; left: 1px; z-index: 1;"><div class="clubs       eight" data-value="8">eight of clubs<span>8</span></div><div class="back"></div></section>

各セクションは1枚のカードを表します。各セクションには2つのdivがあります。1つはカードカバー用で、もう1つは実際のカード面用です。

これがcssです

 #deck section.wrapper.player.flip {
 -webkit-perspective:500;
 -webkit-transform: rotateY(180deg);
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 1.0s linear;
  }

私はもうすぐそこにいます。ここにあるように機能させたいですhttp://css3.bradshawenterprises.com/flip/

私はcssアニメーションにかなり慣れていないので、どんな助けでもありがたいですが、jsで作業するときは多くの可能性があります。

4

1 に答える 1

0

これには、親が存在する場合はその親のcss -webkit-transitionを変更することが含まれます。これは、親を含む複数のプロパティを事前にアニメーション化する場合、非常に扱いにくい場合があります。私はcss3アニメーションの基本的な例とチュートリアルしか見たことがありませんが、実際の世界はまだ何もありません。私は、cssトランジションとアニメーションをモダナイザーで使用することで、すべての開発者が使用できるものを作成できることを望んでいます。まだ誰もこれを説明していませんが、css3遷移のどのプロパティが他の遷移よりも優先されるかはわかりません。探索するのはまったく新しい世界になるでしょう。

私のサイトをもう一度チェックするとhttp://dalydd.com/projects/deckofcards.html今は機能しているはずです-私がアニメーション化している要素は、ラッパーで行った前のアニメーションからcssプロパティを継承していたので、スタイルを追加しました親と私がアニメートしているもので、省略形を使用する代わりに各cssプロパティを書き出しました

-webkit-backface-visibility: hidden;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
-webkit-transform: rotateX(1deg);
于 2012-12-08T06:50:39.737 に答える