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

Question

我试图在悬停状态下旋转3个div（立方体），但似乎不是每个浏览器都可以处理这个。只有IE Edge没有问题。 Firefox在悬停时前2个div工作得很好，但是当在3号盘旋时立方体消失。 当鼠标悬停时，Chrome会开始摇动所有立方体。

我的代码中有什么问题吗？

＆＃13;

＆＃13;

<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>

＆＃13;

$query = "(
    SELECT * 
    FROM schools 
    WHERE ($name IS NULL OR $name = '' OR name = $name)
        AND city='$city')";

＆＃13;

＆＃13;

＆＃13;

这是我的小提琴：

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

Answer 1

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

＆＃13;

＆＃13;

1s

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;