Internet Explorer 10のCSS 3D Transforms

transform-style: preserve-3dのことは忘れてIE 10に合わせる

transform-styleにはflatしかないんだ、という考えで作ります。
.panelの親をアニメーションさせるのではなく、自身をアニメーションさせる指定を行います。

/* 値をflatに（指定しなくても同じ） */
.stage1,
.stage1 > .view {
  -webkit-transform-style: flat;
  transform-style: flat;
}

.stage1 {
  position: relative;
  margin: 100px auto 0;
  width: 100px;
  height: 100px;
  /* 削除 */
  /*
  -webkit-perspective: 500px;
  perspective: 500px;
  */
}

.view {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 追加 --*/
  -webkit-perspective: 500px;
  perspective: 500px;
  /*-- 追加 */
}

.panel {
  position: absolute;
  /* あまり関係ないので以下略（指定は同じ） */
}

.p1 {
  -webkit-transform: translateZ(200px);
  transform: translateZ(200px);
}

.p2 {
  -webkit-transform: rotateY(90deg) translateZ(200px);
  transform: rotateY(90deg) translateZ(200px);
}

.p3 {
  -webkit-transform: rotateY(180deg) translateZ(200px);
  transform: rotateY(180deg) translateZ(200px);
}

.p4 {
  -webkit-transform: rotateY(270deg) translateZ(200px);
  transform: rotateY(270deg) translateZ(200px);
}

/* 削除 */
/*
@-webkit-keyframes rotation {
  from { -webkit-transform: rotateY(0); }
  to   { -webkit-transform: rotateY(360deg); }
}

@keyframes rotation {
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}
*/

/* 追加 --*/
@-webkit-keyframes rotation {
  from { -webkit-transform: rotateY(0) translateZ(200px); }
  to   { -webkit-transform: rotateY(360deg) translateZ(200px); }
}

@keyframes rotation {
  from { transform: rotateY(0) translateZ(200px); }
  to   { transform: rotateY(360deg) translateZ(200px); }
}
/*-- 追加*/

/* 削除 - アニメーションは.panelに指定する */
/*
.view {
  -webkit-animation: rotation 4s linear infinite;
  animation: rotation 4s linear infinite;
}
*/

/* 追加 --*/
.panel {
  -webkit-animation: rotation 4s linear infinite;
  animation: rotation 4s linear infinite;
}

/* 各パネルの初期位置をずらすため、animation-delayで調節 */
.p2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.p3 {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.p4 {
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
}
/*-- 追加 */

安全ではありますが……複雑なアニメーションや変形を行っている場合はかなり大変かもしれません。

処理を分岐する

FirefoxとWebkitは今までどおりでいいわけですから、IE 10と別に指定できるようにしてみます。
そうするとこで、IE 10には上記の指定をし、それ以外は今までどおりという指定ができます。3D Transformsとアニメーションやトランジションを組み合わせている部分でのIE 10はIE 9以下と同じように扱う、ということもできますね。

Modernizr.addTest('csstransformspreserve3d', function () {

  var prop,
      val,
      cssText,
      ret;

  prop = 'transform-style';
  if ('webkitTransformStyle' in document.documentElement.style) {
    prop = '-webkit-' + prop;
  }
  val = 'preserve-3d';
  cssText = '#modernizr { ' + prop + ': ' + val + '; }';

  Modernizr.testStyles(cssText, function (el, rule) {
    ret = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
  });

  return (ret === val);
});

@supports (transfrom-style: preserve-3d) { ... }

/*
 IE 10向けの指定
*/

/*
 @suuportsが使えないWebkit向けの指定
 -webkit-が必要なのでIE 10とは被らない
*/

@supports (transform-style: preserve-3d) or
          (-webkit-transform-style: preserve-3d) {
  /* IE 10向けに指定したアニメーションなどを上書きして削除する指定 */
  /* 標準構文と-webkit-付きを今までどおりに指定 */
}

結局どうするの？

IE 10に合わせておくのが無難かと思われます。

分岐させる場合には、多数のIE 10がIE 11に置き換わって他のブラウザと同じように動作するようになったときのことを考えると Modernizerを使って判別しつつJavaScriptオフの環境向けにはIE 10と同じ指定をしておくのが現実的かなーと思います。
もしくは@supportsで頑張るか。

IE 10で@supports使えたら楽だったんですけどね……。