css rotate3d () translate 3d ();не работает в Firefox и IE11, но работает в Chrome

Question

Преобразование анимации CSS: rotate3d отлично работает в Chrome, но в Firefox и IE11.Он просто перемещается слева направо в Firefox, но не переворачивается, как работает Chrome и Opera.

.box {
  width: 100px;
  height: 50px;
  float: left;
  background: #007bff;
  text-align: center;
  color: white;
  font-size: 20px;
  padding-top: 35px;
  position: relative;
  transition: 0.5s;
}

.box:hover {
  transform: rotate3d(-10, -10, 1, 360deg) translate3d(100px, 0px, 0px);
  transition: 0.5s;
}

<div class="box">
  Hi!
</div>

Answer 1

Примените к базовому состоянию аналогичное преобразование, но с поворотом и сдвигом, установленными на ноль: (проверено только в FF)

.box {
  width: 100px;
  height: 50px;
  float: left;
  background: #007bff;
  text-align: center;
  color: white;
  font-size: 20px;
  padding-top: 35px;
  position: relative;
  transition: 0.5s;
  transform: rotate3d(-10, -10, 1,0deg) translate3d(0px, 0px, 0px);
  
}

.box:hover {
  transform: rotate3d(-10, -10, 1, 360deg) translate3d(100px, 0px, 0px);
}

<div class="box">
  Hi!
</div>