css rotate3d（）翻译3d（）;不在firefox和IE11中工作，但在chrome中工作

Question

css动画变换：rotate3d在chrome中工作正常但在firefox和IE11中。它只是在Firefox中从左到右移动，但不像它的工作铬和歌剧那样翻转。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>