Cube 在 Chrome 和 Firefox 中旋转，但在 Safari 中不旋转答案

【问题标题】：Cube Spins in Both Chrome and Firefox but Not in SafariCube 在 Chrome 和 Firefox 中旋转，但在 Safari 中不旋转
【发布时间】：2019-06-27 04:27:42
【问题描述】：

我有一个使用 CSS 的 3D 立方体，它在 X 轴和 Y 轴上都旋转。它在 Chrome 和 Firefox 中运行良好，但在 Safari 中无法旋转。我查看了 Safari 控制台，也没有看到任何错误或异常。

立方体旋转的 Codepen 示例：https://codepen.io/anon/pen/orGywz

/*Login Cube*/

#cube-wrapper-login {
  position: absolute;
  left: 46%;
  top: 10%;
  perspective: 2000px;
}

.cube_login {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 3.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(1, 1, 0, 360deg);
    /*controls rotation amount on one axis) */
    ;
  }
}

#arrow {
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  margin-top: 40px;
}

ul li {
  position: relative;
  padding-bottom: 10px;
}

ul {
  list-style: none;
}


/* Size and border color for each face */

.face_login {
  position: absolute;
  width: 150px;
  height: 150px;
  border: solid black 1.5px;
  text-align: center;
  vertical-align: middle;
  line-height: 150px;
  font-size: 25px;
  font-weight: bold;
}


/* Transforming every face into their correct positions */

#front_face_login {
  transform: translateX(-15px) translateY(-15px) translateZ(75px);
  background: rgba(252, 183, 17, 1);
  /*Spanish Yellow*/
}

#back_face_login {
  transform: translateX(-15px) translateY(-15px) translateZ(-75px);
  background: rgba(243, 112, 33, 1);
  /*Vivid Tangelo*/
}

#right_face_login {
  transform: translateY(-15px) translateX(60px) rotateY(90deg);
  background: rgba(204, 0, 76, 1);
  /*Spanish Carmine*/
}

#left_face_login {
  transform: translateY(-15px) translateX(-90px) rotateY(90deg);
  background: rgba(100, 96, 170, 1);
  /*Liberty Purple*/
}

#top_face_login {
  transform: translateX(-15px) translateY(-90px) rotateX(90deg);
  background: rgba(0, 137, 208, 1);
  /*Blue Cola*/
}

#bottom_face_login {
  transform: translateX(-15px) translateY(60px) rotateX(90deg);
  background: rgba(13, 177, 75, 1);
  /*Green (Pantone)*/
}

.cube_login {
  transform: rotateX(90deg) rotateY(90deg);
}

<div id="cube-wrapper-login">
  <div class="cube_login">
    <!-- A div for each face of the cube -->
    <br><br>
    <div id="front_face_login" class="face_login">XQUBE</div>
    <div id="right_face_login" class="face_login">XQUBE</div>
    <div id="back_face_login" class="face_login">XQUBE</div>
    <div id="left_face_login" class="face_login">XQUBE</div>
    <div id="top_face_login" class="face_login">XQUBE</div>
    <div id="bottom_face_login" class="face_login">XQUBE</div>
  </div>
</div>

【问题讨论】：

标签： html css safari css-animations

【解决方案1】：

我并不是 3D 变换方面的专家，但它可能就像在 CSS 中更改它一样简单。我真的不太了解rotate3D 的参数，所以您可能需要将其更改为180deg / 50%。关于这个问题实际上还有另一篇关于 SO 的帖子。由于某种原因，您显然需要中间转换。见：CSS Animation rotate3d not working in Safari

还发现这个参考是一个在线工具，但这里可能真的不需要，Autoprefixer CSS online

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  50% {
  transform: rotate3d(1, 1, 0, 180deg);
}
  100% {
    transform: rotate3d(1, 1, 0, 360deg);
    /*controls rotation amount on one axis) */
    ;
  }
}

【讨论】：