CSS 3D 翻转中不同元素的延迟动画计时

Question

所以我在这里有这个小提琴中CSS翻转的基本设置：http://jsfiddle.net/6r82fzk6/

这是什么：CSS 3D Flip（容器，卡片，正面和背面元素），子元素在正面和背面。翻转发生在 ：悬停以进行演示。

我想要实现的目标：让后退元素比其他所有元素都慢过渡。因此，当卡片翻转并且背面可见时，背面（#be）的子元素已经完成了过渡的一半。

到目前为止，我所拥有的：下面的代码片段。您可以打开 JSFiddle 链接以查看它的实际效果。它的目标是延迟黑色渐变元素。

#container {
  perspective: 800px;
  position: relative;
  width: 300px;
  height: 300px;
  margin: 1px auto;
}
#card {
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  position: relative;
}
#container:hover #card {
  transform: rotateY(180deg);
}
#front,
#back {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 300px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
#front {
  background: red;
  z-index: 2;
}
#back {
  transform: rotateY(180deg);
  background: blue;
}
#fe,
#be {
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translateZ(50px);
}
#fe {
  width: 50px;
  height: 50px;
  background: gold;
  box-shadow: 0 0 4px black;
}
#be {
  width: 260px;
  height: 260px;
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 1px 3px whitesmoke inset;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

<!-- Outside container -->
<div id="container">
  <!-- Card being flipped -->
  <div id="card">
    <!-- Front face -->
    <div id="front">
      <!-- Front Child element -->
      <div id="fe"></div>
    </div>
    <!-- Back face -->
    <div id="back">
      <!-- Back Child element -->
      <div id="be"></div>
    </div>
  </div>
</div>

澄清一下：这不是生产代码，它更多的是为了测试和理解。我就是这样探索的。

Answer 1

您无法在当前设置中执行此操作。

这是因为您移动的不是前面或后面，而是容器。

如果您希望它们以不同的方式移动，则必须直接移动它们而不是容器

#container:hover #front {
    transform:rotateY(180deg);
}
#container:hover #back {
    transform:rotateY(360deg);
}
#front {
    transition:all 1s ease-in-out;
}
#back {
    transition:all 2s ease-in-out;
}

演示