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

demo

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

1 个答案: