Question

我有一个使用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>

Answer 1

我并不是3D转换方面的专家，但是它可能和在CSS中进行更改一样简单。我对Rotate3D的参数真的不太了解，因此您可能必须将其更改为180deg / 50％。实际上，还有关于此问题的另一篇文章。您显然需要出于某种原因进行中间转换。参见：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) */
    ;
  }
}

Chrome浏览器和Firefox中均可使用多维数据集旋转，但Safari中不支持多维数据集旋转

1 个答案: