Html Css 3D动画在Chrome上运行良好，不会'；我不在野生动物园工作

我正在用css transform3d功能构建旋转立方体。 它在Chrome上运行良好，但在Safari和 我不明白为什么它显示为错误的方式

我创建了这段代码的Plunker，这样您就可以解决这个问题了。 该代码的理想外观可以在Chrome和 我想让它看起来和Chrome上发生的完全一样

任何帮助，将不胜感激，包括我不仅修复代码，但 还描述了为什么它不起作用

普朗克的密码

HTML

---

谢谢

Safari只需要

-webkit转换样式

，而不是

-transform样式

。我还补充说

-webkit-transform: translateZ(200px);

文本（

.welcome#message

），这样它就不会与Safari中的多维数据集相交，因为它不在Chrome中

更新的演示：

.welcome {
  position: relative;
  width: 300px;
  margin: 0 auto;
  height: 300px;
}
.welcome #animating_cube {
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-45deg);
  -webkit-transform: rotateX(-30deg) rotateY(-45deg);
  margin: 0 auto;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0px;
  -webkit-animation: animatingCubeRotate 5s linear 0s infinite normal;
  animation: animatingCubeRotate 5s linear 0s infinite normal;
}

.welcome #animating_cube .face1 {
  display: block;
  width: 150px;
  transform-style: preserve-3d;
  height: 150px;
  position: absolute;
  top: 75px;
  left: 75px;
  -webkit-animation: keyframeForFace1 5s linear 0s infinite normal;
  animation: keyframeForFace1 5s linear 0s infinite normal;
}

.welcome #animating_cube .face2 {
  display: block;
  width: 150px;
  transform-style: preserve-3d;
  height: 150px;
  position: absolute;
  top: 75px;
  left: 75px;
  -webkit-animation: keyframeForFace2 5s linear 0s infinite normal;
  animation: keyframeForFace2 5s linear 0s infinite normal;
}

.welcome #animating_cube .face3 {
  display: block;
  width: 150px;
  transform-style: preserve-3d;
  height: 150px;
  position: absolute;
  top: 75px;
  left: 75px;
  -webkit-animation: keyframeForFace3 5s linear 0s infinite normal;
  animation: keyframeForFace3 5s linear 0s infinite normal;
}

.welcome #animating_cube .face4 {
  display: block;
  width: 150px;
  transform-style: preserve-3d;
  height: 150px;
  position: absolute;
  top: 75px;
  left: 75px;
  -webkit-animation: keyframeForFace4 5s linear 0s infinite normal;
  animation: keyframeForFace4 5s linear 0s infinite normal;
}

.welcome #animating_cube .face1 {
  background: #eeeeee;
  transform: rotateX(90deg) translateZ(75px);
  -webkit-transform: rotateX(90deg) translateZ(75px);
}
.welcome #animating_cube .face2 {
  background: #cccccc;
  transform: rotateY(90deg) translateZ(75px);
  -webkit-transform: rotateY(90deg) translateZ(75px);
}
.welcome #animating_cube .face3 {
  background: #dddddd;
  transform: translateZ(74px);
  -webkit-transform: translateZ(74px);
}
.welcome #animating_cube .face4 {
  background: #cccccc;
  transform: rotateY(-90deg) translateZ(75px);
  -webkit-transform: rotateY(-90deg) translateZ(75px);
}
.welcome #message {
  position: absolute;
  width: 300px;
  top: 70px;
}
.welcome #message h1 {
  text-align: center;
}
.welcome #message span {
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
}

@-webkit-keyframes animatingCubeRotate {
  0% {
    -webkit-transform: rotateX(-30deg) rotateY(-45deg);
  }

  100% {
    -webkit-transform: rotateX(-30deg) rotateY(45deg);
  }
}

@keyframes animatingCubeRotate {
  0% {
    transform: rotateX(-30deg) rotateY(-45deg);
    -webkit-transform: rotateX(-30deg) rotateY(-45deg);
  }

  100% {
    transform: rotateX(-30deg) rotateY(-45deg);
    -webkit-transform: rotateX(-30deg) rotateY(-45deg);
  }
}

@-webkit-keyframes keyframeForFace2 {
  0% {
    background: #cccccc;
  }

  100% {
    background: #bbbbbb;
  }
}

@keyframes keyframeForFace2 {
  0% {
    background: #cccccc;
  }

  100% {
    background: #bbbbbb;
  }
}

@-webkit-keyframes keyframeForFace3 {
  0% {
    background: #dddddd;
  }

  100% {
    background: #cccccc;
  }
}

@keyframes keyframeForFace3 {
  0% {
    background: #dddddd;
  }

  100% {
    background: #cccccc;
  }
}
@-webkit-keyframes keyframeForFace4 {
  0% {
    background: #cccccc;
  }
  100% {
    background: #dddddd;
  }
}
@keyframes keyframeForFace4 {
  0% {
    background: #cccccc;
  }
  100% {
    background: #dddddd;
  }
}

-webkit-transform: translateZ(200px);