1

私は何時間もこれに取り組んでおり、ウェブ全体をチェックして、役立つものを見つけましたが、求めている結果が得られないようです.

CSSアニメーションを使って簡単なゲームを作ろうとしています。画面を 3 行の 9 つの等しい div に分割しました。中央のブロックから開始して、別の div のボタンをクリックすると、「船」がその div に移動し、別のボタンがクリックされるまでそこにとどまります。 .

なんとか船を動かすことができましたが、実際の飛行機の「ロール」効果を与えるために船に回転を追加しようとすると、設定された回転角度でアニメーションを介して爆弾が飛び込みます。ゲームを z 軸に沿ってスクロールさせて、疑似 3D の外観にしたいと考えています。3D っぽいことを除けば、古いトップダウンの縦スクロール シューティング ゲームのようなものです。

animation-name : cssAnimation;
   animation-duration : 1s;
   animation-iteration-count : 1;
   animation-timing-function : ease;
   animation-fill-mode :;
   -webkit-animation-name : cssAnimation;
   -webkit-animation-duration : 1s;
   -webkit-animation-iteration-count : 1;
   -webkit-animation-timing-function : ease;
   -webkit-animation-fill-mode :;
   -ms-animation-name : cssAnimation;
   -ms-animation-duration : 1s;
   -ms-animation-iteration-count : 1;
   -ms-animation-timing-function : ease;
   -ms-animation-fill-mode :;
}
@-webkit-keyframes cssAnimation {
   0% {
       -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(0%);
   }
   75% {
       -webkit-transform: rotate(15deg) scale(1) skew(0deg) translateX(-225%);
   }
   100% {
       -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(-225%);
   }
}

http://jsfiddle.net/ryanhagz/5GAX7/

4

2 に答える 2

1 
   @-webkit-keyframes cssAnimation {
       0% {
           -webkit-transform: scale(1) skew(0deg) translateX(0%);
       }
       50% {
           -webkit-transform: scale(1) skew(0deg) translateX(-225%) rotate(0deg) rotate(90deg) rotate(180deg);
       }
  100% {
           -webkit-transform: scale(1) skew(0deg) translateX(-225%);
       }
   }

あなたのコードを編集してみました。

jsfiddle編集

こちらの再起動アニメーションも参照してください

于 2013-07-10T04:37:03.573 に答える