Куб вращается в Chrome и Firefox, но не в Safari - PullRequest
Новая
       27

Куб вращается в Chrome и Firefox, но не в Safari

0 голосов
/ 26 июня 2019

У меня есть 3D-куб, использующий CSS, который вращается как по оси X, так и по оси Y. Он прекрасно работает в Chrome и Firefox, но не вращается в Safari. Я посмотрел в консоли Safari и не вижу ни ошибок, ни исключений.

Пример кодирования вращающегося куба: 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>

1 Ответ

0 голосов
/ 26 июня 2019

Я на самом деле не эксперт по трехмерным преобразованиям, но это может быть так же просто, как изменить это в вашем CSS. Я действительно не очень разбираюсь в аргументах для rotate3D, поэтому вам, возможно, придется изменить это на 180deg / 50%. На самом деле есть еще один пост на эту тему. Вам, очевидно, нужно промежуточное преобразование по какой-то причине. См .: CSS-анимация rotate3d не работает в Safari

Также нашел эту ссылку в качестве онлайн-инструмента, но, вероятно, здесь на самом деле не нужен, Автопрефиксер CSS онлайн 

@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) */
    ;
  }
}
...