Question

我用css transform3d功能构建旋转立方体。它适用于Chrome，但不适用于Safari和我不明白为什么它会以错误的方式出现。

我创建了此代码的Plunker，因此您可以实际解决此问题。可以在Chrome和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

在Chrome上使用的Css 3D动画无法在Safari上运行

1 个答案: