html - 在 Chrome 上运行良好的 Css 3D 动画在 Safari 上不起作用

Question

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

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

我将不胜感激，不仅包括修复代码，还包括还说明了为什么它不起作用。

Plunker 代码

http://plnkr.co/edit/csvtleYoWvOFccm4idcP?p=preview

HTML

    <div class='welcome'>
        <div id='animating_cube'>
          <div class='face1'></div>
          <div class='face2'></div>
          <div class='face3'></div>
          <div class='face4'></div>
        </div>
        <div id='message'>
          <h1>Title</h1>
          <span>
            This is an animating cube.
          </span>
        </div>
      </div>

CSS

.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;
  }
}

谢谢

Answer 1

Safari 只需要 -webkit-transform-style 而不是 -transform-style。我也加了

-webkit-transform: translateZ(200px);

添加到文本 (.welcome #message)，这样它就不会在 Safari 中与立方体相交，因为它在 Chrome 中不会。

更新演示:http://plnkr.co/edit/3MefAjQgocgRpaswsZLV?p=preview