CSS3 旋转在 Firefox 和 IE 中无法使用 2 个嵌套旋转答案

【问题标题】：CSS3 rotate not working in firefox and IE with 2 nested rotationsCSS3 旋转在 Firefox 和 IE 中无法使用 2 个嵌套旋转
【发布时间】：2015-10-27 23:00:49
【问题描述】：

我制作了一个动画，目前在 -webkit 浏览器（safari、chrome）和 Opera 中有效，但在 IE 和 firefox 中无效。

您可以看到正在运行的动画here。

有 2 种转换，一种适用于跨浏览器工作的字段，另一种适用于 Firefox 和 IE 中的播放器，如下所示：

但它应该看起来像（如在 Chrome、Safari 和 Opera 中）：

以下是适用于玩家的规则：

  @-moz-keyframes giocatoreRot {
      from { -moz-transform: rotateX(0deg); }
      to { -moz-transform: rotateX(-60deg); }
  }
  @-webkit-keyframes giocatoreRot {
     from {-webkit-transform: rotateX(0deg);}
     to {-webkit-transform: rotateX(-60deg);}
  }

  /* all other browsers */
  @keyframes giocatoreRot {
    from {
       transform: rotateX(0deg);
       -ms-transform: rotateX(0deg);
     }
    to {
       transform: rotateX(-60deg);
       -ms-transform: rotateX(-60deg);
    }
  }

  .giocatoreRot{
     height: 120px;
     z-index: 10;

     -webkit-transform: rotateX(-60deg);
     -moz-transform: rotateX(-60deg);
     -ms-transform: rotateX(-60deg);
     -o-transform: rotate(-60deg);
     transform: rotateX(-60deg);

     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;
     transform-style: preserve-3d;

     -webkit-animation:giocatoreRot 2s linear;
     -moz-animation:giocatoreRot 2s linear;
     -o-animation:giocatoreRot 2s linear;
     -ms-animation:giocatoreRot 2s linear;
     animation:giocatoreRot 2s linear;      
   }

它们与用于旋转#field 的规则相同。我没有发布 sn-p 因为你可以在上面的链接中尝试不同的规则。

【问题讨论】：

preserve-3d 在 IE 中不受支持：caniuse.com/#search=transform-style
+尊重 Opera 中的测试，加油！
@StephanBijzitter Opera 现在不使用 webkit/blink 了吗？无论如何，除了增加更多的测试时间之外，看 Opera 是毫无用处的。
@somethinghere 是的，它使用 Blink，它几乎与 Chrome 的引擎相同，但有时会有一些小的不一致。
Firefox 和 IE 具有相同的行为； IE 不支持 preserve-3d，但 Firefox 完全支持。那么为什么 Firefox 会有这种行为呢？

标签： html css css-transforms

【解决方案1】：

在父节点上添加perspective。

示例：（发给您的.contenitore）

.contenitore {
   // ...
   perspective: 1000px;
}

【讨论】：

还添加到网站中，以便您查看。它不能解决问题。
我没有看到你添加了@Jacopo
我删除了Firefox 和IE 的动画，因为： • IE 不支持preserve-3d。 • Firefox 的行为与其他浏览器完全不同