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

Question

所以我在这个 fiddle 中完成了 CSS 翻转的基本设置:http://jsfiddle.net/6r82fzk6/

这是什么:一个 CSS 3D Flip(容器、卡片、正面和背面元素)，其子元素位于正面和背面。翻转发生在 :hover 上进行演示。

我想要实现的目标:让后退元素的转换速度比其他元素慢。因此，当卡片翻转并且背面可见时，背面的子元素 (#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;
}

demo