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

Question

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

这是什么： 一个 CSS 3D 翻转（容器、卡片、前后元素），前后都有子元素。翻转发生在 :hover 进行演示。

我想要实现的目标： 让后退元素的过渡速度比其他任何东西都慢。因此，当卡片翻转并且背面可见时，背面的子元素 (#be) 已过渡到一半。

到目前为止我所拥有的： 下面的代码 sn-p。您可以打开 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;
}

demo