如何使用变换：旋转作为悬停？

Question

我正在尝试在悬停状态下旋转 3 个 div（立方体），但似乎并非每个浏览器都可以处理这个问题。只有IE Edge没有问题。 Firefox 在悬停前 2 个 div 时效果很好，但在第 3 个悬停时立方体消失了。 悬停时，Chrome 开始晃动所有立方体。

我的代码有问题吗？

.cube-a,
.cube-b,
.cube-c {
  margin-top: 100px;
  margin-left: 10px;
  float: left;
  margin-right: 80px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(108deg) rotateY(16deg) rotateZ(192deg);
}

.cube-a .tcface,
.cube-b .tcface,
.cube-c .tcface {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cube-a .cube-a-face {
  background-color: #f4e00d;
  /* geel */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-b .cube-b-face {
  background-color: #8db63c;
  /* groen */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-c .cube-c-face {
  background-color: #009de0;
  /* blauw */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-a .cube-a-right,
.cube-c .cube-c-right {
  background-color: #8db63c;
  /* groen */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-b .cube-b-right {
  background-color: #f4e00d;
  /* geel */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-a .cube-a-bottom,
.cube-b .cube-b-bottom {
  background-color: #009de0;
  /* blauw */
}

.cube-c .cube-c-bottom {
  background-color: #f4e00d;
  /* geel */
}

.cube-a-bottom,
.cube-b-bottom {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
}

.cube-a-face,
.cube-a-right,
.cube-a-bottom,
.cube-b-face,
.cube-b-right,
.cube-b-bottom,
.cube-c-face,
.cube-c-right,
.cube-c-bottom {
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 92px;
  font-weight: 500;
  font-family: "Simply Rounded Bold";
}

.cube-a:hover,
.cube-b:hover,
.cube-c:hover {
  -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -o-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
}

<div class="cube-a">
  <div class="tcface cube-a-face">A</div>
  <div class="tcface cube-a-right">B</div>
  <div class="tcface cube-a-bottom">C</div>
</div>

<div class="cube-b">
  <div class="tcface cube-b-face">B</div>
  <div class="tcface cube-b-right">A</div>
  <div class="tcface cube-b-bottom">C</div>
</div>

<div class="cube-c">
  <div class="tcface cube-c-face">C</div>
  <div class="tcface cube-c-right">B</div>
  <div class="tcface cube-c-bottom">A</div>
</div>

这是我的小提琴：

https://jsfiddle.net/8vuj7peb/100/

Answer 1

尝试添加-webkit-transition: all 1s; 和transition: all 1s;。这是transition property，使转换1s 很长。

.cube-a,
.cube-b,
.cube-c {
  margin-top: 100px;
  margin-left: 10px;
  float: left;
  margin-right: 80px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(108deg) rotateY(16deg) rotateZ(192deg);
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
}

.cube-a .tcface,
.cube-b .tcface,
.cube-c .tcface {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cube-a .cube-a-face {
  background-color: #f4e00d;
  /* geel */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-b .cube-b-face {
  background-color: #8db63c;
  /* groen */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-c .cube-c-face {
  background-color: #009de0;
  /* blauw */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-a .cube-a-right,
.cube-c .cube-c-right {
  background-color: #8db63c;
  /* groen */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-b .cube-b-right {
  background-color: #f4e00d;
  /* geel */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-a .cube-a-bottom,
.cube-b .cube-b-bottom {
  background-color: #009de0;
  /* blauw */
}

.cube-c .cube-c-bottom {
  background-color: #f4e00d;
  /* geel */
}

.cube-a-bottom,
.cube-b-bottom {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
}

.cube-a-face,
.cube-a-right,
.cube-a-bottom,
.cube-b-face,
.cube-b-right,
.cube-b-bottom,
.cube-c-face,
.cube-c-right,
.cube-c-bottom {
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 92px;
  font-weight: 500;
  font-family: "Simply Rounded Bold";
}

.cube-a:hover,
.cube-b:hover,
.cube-c:hover {
  -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -o-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
}

<div class="cube-a">
  <div class="tcface cube-a-face">A</div>
  <div class="tcface cube-a-right">B</div>
  <div class="tcface cube-a-bottom">C</div>
</div>

<div class="cube-b">
  <div class="tcface cube-b-face">B</div>
  <div class="tcface cube-b-right">A</div>
  <div class="tcface cube-b-bottom">C</div>
</div>

<div class="cube-c">
  <div class="tcface cube-c-face">C</div>
  <div class="tcface cube-c-right">B</div>
  <div class="tcface cube-c-bottom">A</div>
</div>